2

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.

CRONE
  • 21
  • 4

5 Answers5

0

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

FelixACR
  • 89
  • 2
0

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;
}
Daweed
  • 1,419
  • 1
  • 9
  • 24
0

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;


}
Zoe
  • 27,060
  • 21
  • 118
  • 148
nano dev
  • 335
  • 4
  • 6
0

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;
}
Lucy
  • 35
  • 7
0

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.

jerald
  • 1
  • 1
    Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – jasie Aug 19 '22 at 08:14