Menu
I tried to display the footer at the bottom of the page even if there is no content and it seems to work. However, you have to scroll to see the footer. It’s right after you scroll and not on the bottom of the page right away. I can’t figure out what I am doing wrong. Here is my code:
<body>
<div id="root">
<div class="app">
<div class="wrapper">
<div class="nav">
<div>
<header class="header">
<div>
<ul>
<li>Title</li>
</ul>
</div>
<div>
<ul>
<li>About</li>
</ul>
</div>
</header>
</div>
</div>
</div>
<div class="footerWrap">
<div>
<footer>
<div class="copyright">
<div class="text">© 2018 Footer</div>
</div>
</footer>
</div>
</div>
</div>
</div>
</body>
styles:
html, body, #root, .app {
height: 100%;
}
.wrapper {
min-height: 100%;
margin-bottom: -100px;
padding-bottom: 100px;
}
.footerWrap {
background-color: green;
padding-top: 15px;
width: 100%;
}
958
This should make the footer appear always at the bottom of the page. We make the footer wrapper have position: absolute and use bottom: 0 to push it to the bottom. left: 0 removes the horizontal scrollbar.
html {
position: relative;
min-height: 100%;
}
.footerWrap {
position: absolute;
background-color: green;
width: 100%;
bottom: 0;
left: 0;
}<html>
<div class="footerWrap">Footer Here</div>
</html>I stripped out all the excess divs to make it easier to read.
164
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
