My footer doesn't stay at the bottom of my webpage
Question
I am a HTML / CSS beginner and I can't fix a problem. My problem is that when I zoom in my footer follows me.
By the way, I am using bootstrap 4
html{
position: relative;
min-height: 100%;
}
.Footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px; /* Set the fixed height of the footer here */
line-height: 60px;
background-color: #f5f5f5;
}
<footer class="Footer">
<div class="container-fluid">
<div class="col">
<!-- Les lanngues (Footer) -->
<div class="col-lg-3 col-xs-2">
<a href="#">EN</a>
<a href="#">GER</a>
<a href="#">FR</a>
</div>
</div>
<div class="col">
<!-- L'adresse E-mail (Footer) -->
<div class="col-lg-5 col-xs-5" id="EmailFooter">
<span class="">E-mail : <a href="#">asdpawd@bluewin.ch</a></span>
</div>
<div class="col">
<!-- Telephone (Footer) -->
<div class="col-lg-3 col-xs-6">
<span id="Tel-Footer" >Tél : xxxxx</span>
</div>
</div>
</div>
</footer>
Not zoomed in: https://prntscr.com/pi19m7
Zoomed in: https://prntscr.com/pi19v3
When I zoom in, it just stop into the button
3 answers
solution1
0 2019-10-11 17:08:48
Welcome to our community. It is better to use a felx-box than absolute.
html, body { height: 100%; } #page-content { flex: 1 0 auto; } #sticky-footer { flex-shrink: none; } /* Other Classes for Page Styling */ body { background: #000; }
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <body class="d-flex flex-column"> <div id="page-content"> <div class="container text-center"> <div class="row justify-content-center"> <div class="col-md-7"> <h1 class="font-weight-light mt-4 text-black">Sticky Footer using Flexbox</h1> </div> </div> </div> </div> <footer id="sticky-footer" class="py-4 bg-dark text-white-50"> <div class="container text-center"> <small>Copyright ©</small> </div> </footer> </body>
solution2
0 2022-12-18 05:26:21
Setting the position to absolute may be the issue. This property will not be responsive to zoom ins and will remain in the same position regardless of the movement of other elements. Attempt removing the "position: absolute;" and instead giving the footer a margin-top if you want it to be spaced away from the content above.
solution3
0 2022-12-18 05:35:02
I think that position: absolute is the issue here. Try to remove it and then run it. Sometimes working with position can be little tricky as well so try to get over with it and then apply your footer and see the results.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.