CSS footer doesn't stay at bottom on small screen size

Question

I Have a problem on my website, that my footer doesn't stay on bottom of the page on smaller screen size.

Photo: https://prnt.sc/zzjral

The index:

<div class="main">
    <div class="left-side">
        <div class="fav-matches--section">
            <div class="section__title">
                <span class="title">Meciuri favorite</span>
            </div>
            <div class="fav-matches">
            </div>
        </div>
        <div class="predicts">
        </div>
    </div>
    <div class="right-side">
        <div class="announcement">
            <span class="announce-title">-50%</span>
            <span class="announce-desc">VIP MEMBER</span>
        </div>
    </div>
</div>

The Footer:

<footer class="site-footer">
    <div class="site-footer-legal">
        <ul class="social-list">
            <li class="social-list_item"><a class="icon" href=""><i class="fab fa-facebook-f"></i></a></li>
            <li class="social-list_item"><a class="icon" href=""><i class="fab fa-instagram"></i></a></li>
        </ul>
        <p class="desk"></p>
    </div>
    <div class="site-footer-right">
        <div class="bottom-menu">
            <div class="bottom-menu-links">
                <a></a>
                <a></a>
                <a></a>
                <a></a>
                <a></a>
            </div>
            <p class="desk-resp"></p>
            <p class="desk"></p>
        </div>
        <div class="text-responsible">
            <p></p>
        </div>
    </div>
</footer>

The CSS:

html {
margin: 0;
padding: 0;
}

body {
    margin: 0;
    padding: 0;
    background: #313535;
    font-family: Roboto,sans-serif;
}

.main {
    display:flex;
    padding: 50px 50px;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 75px - 105px);
}

.site-footer {
    background: #202323;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px 50px;
    min-width: 390px;
    width: 100%;
}

*Note: I tried the thing with:

html { height: 100vh; / height: 100%; }

and didn't worked. I tried the thing with position relative on.main and position absolute on footer, it didn't worked.

Answer 1

When you use height: 100%; in css, make sure the HTML node childs before your footer also are at 100%, If you have a container, it won't take the full screen page otherwise

Answer 2

Try it with media queries:

@media screen and (min-width: 500px) {
   site-footer {
      bottom:0px;
      position: relative;
   }
}

Remove this:

html {
   margin: 0;
   padding: 0;
}

Add:

* {
   margin: 0;
   padding: 0;
}

Do not use styling for the html tag.

Answer 3

It works when added position: fixed; and bottom: 0; in the .site-footer class :

.site-footer {
   background: #202323;
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 25px 50px;
   min-width: 390px;
   width: 100%;
   position: fixed;
   bottom: 0;
}

Answer 4

I have added position and bottom . Hope this will work for you.

    .site-footer {
        background: #202323;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 25px 50px;
        min-width: 390px;
        width: 100%;
        position: fixed;
        bottom: 0;


    }

Answer 5

You can try using position: sticky.

 .site-footer {
    background: #202323;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px 50px;
    min-width: 390px;
    width: 100%;
    position: sticky;
    bottom: 0;
}

Answer 6

Use footer height and width in percent and give the footer position: sticky now the footer will stick to the page no matter how much the size of the screen is.