Javascript css bottom empty block problem

user_16456704 0
Viewed 124

My webpage has one empty container. Why? Where is the problem i can't find. I will share my codes and screenshots. Can you help me please? note: If i make big ( i mean full screen ) to screen, then this empty block has gone. But if i do small screen for example 50% of the screen, then it will appear.

First, let's look screenshots: Full screen screenshot:

enter image description here

When half of the screen it appear like this:

enter image description here

Loginpage.css codes:

.login-page {
    background: linear-gradient(to right, #6083b1b7, #5970f19f, #6083b1b7);
}

.navbar-light {
    background-color: #ffffff;
    box-shadow: 0px 14px 80px rgba(34, 35, 58, 0.2);
}

.login-page-hr {
    border: 1px solid rgba(255, 255, 255, 0.192);
    margin-top: 7%;
    margin-bottom: 3%;
}

.login-page-slogan {
    display: flex;
    justify-content: center;
    margin-bottom: 25px;
    font-size: 30px;
    font-weight: 700;
}

.login-button {
    cursor: pointer;
    color: white;
    padding: 12px;
    border-radius: 8px;
    display: inline-block;
}

.google {
    background-color: #4285f4;
    color: white;
}

Footer.css codes here:

a {
    color: inherit;
}

.item1 {
    border: none;
    background-color: inherit;
    color: #6bd1f0;
    padding-left: 10px;
    font-size: 20px;
    display: flex;
    justify-content: left;
    align-items: center;
}

.item1:hover {
    text-decoration: none;
    color: #48976a;
}

.item1:focus {
    outline: 0;
}

.item2 {
    background: rgba(49, 49, 54, 0.993);
    color: rgb(190, 190, 190);
    margin: 1px;
    font-size: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.item3 {
    font-size: 20px;
    background: #292a30;
    display: flex;
    justify-content: center;
    align-items: center;
}

.item3:hover {
    background-color: #000000;
    transition: 0.4s;
}

.item4 {
    font-size: 20px;
    background: #25252b;
    display: flex;
    justify-content: center;
    align-items: center;
}

.item4:hover {
    background-color: #4267b2;
    transition: 0.4s;
}

.item5 {
    font-size: 20px;
    background: #202025;
    display: flex;
    justify-content: center;
    align-items: center;
}

.item5:hover {
    background-color: #da0e0e;
    transition: 0.4s;
}

.footer-container {
    color: aliceblue;
    text-align: center;
    background-color: rgba(49, 49, 54, 0.993);
    font-size: 15px;
    width: 100%;
    height: 4rem;
    display: grid;
    grid-template-columns: 3fr 6fr 1fr 1fr 1fr;
}

here empty small block problem with position fixed and bottom 0: enter image description here

css html javascript
1 Answers

Problem:

The problem is from .footer-container, If I see the screenshot you listed correctly, so this is a footer, and footer must be fixed to be on the bottom of the screen, that is why there is additional unnecessary space on the bottom of the screen.

Solution

To fix this issue, try adding position: fixed; & bottom: 0; to your .footer-container.

Minimal example:

Here is a minimal example to show that position: fixed; & bottom: 0; will fix this issue:

.footer-container {
    color: aliceblue;
    text-align: center;
    background-color: rgba(49, 49, 54, 0.993);
    font-size: 15px;
    width: 100%;
    height: 4rem;
    display: grid;
    grid-template-columns: 3fr 6fr 1fr 1fr 1fr;
    position: fixed;
    bottom: 0;
}
<div class="footer-container">
</div>

And here is the complete solution to your question:

a {
    color: inherit;
}

.item1 {
    border: none;
    background-color: inherit;
    color: #6bd1f0;
    padding-left: 10px;
    font-size: 20px;
    display: flex;
    justify-content: left;
    align-items: center;
}

.item1:hover {
    text-decoration: none;
    color: #48976a;
}

.item1:focus {
    outline: 0;
}

.item2 {
    background: rgba(49, 49, 54, 0.993);
    color: rgb(190, 190, 190);
    margin: 1px;
    font-size: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.item3 {
    font-size: 20px;
    background: #292a30;
    display: flex;
    justify-content: center;
    align-items: center;
}

.item3:hover {
    background-color: #000000;
    transition: 0.4s;
}

.item4 {
    font-size: 20px;
    background: #25252b;
    display: flex;
    justify-content: center;
    align-items: center;
}

.item4:hover {
    background-color: #4267b2;
    transition: 0.4s;
}

.item5 {
    font-size: 20px;
    background: #202025;
    display: flex;
    justify-content: center;
    align-items: center;
}

.item5:hover {
    background-color: #da0e0e;
    transition: 0.4s;
}

.footer-container {
    color: aliceblue;
    text-align: center;
    background-color: rgba(49, 49, 54, 0.993);
    font-size: 15px;
    width: 100%;
    height: 4rem;
    display: grid;
    grid-template-columns: 3fr 6fr 1fr 1fr 1fr;
    position: fixed;
    bottom: 0%;
}
user_149456960
Related