How To Keep
I know this is may be a old question, But I have tried many way, if the content of is light such as 2 row, the footer will come up and leave a lot of space. Here is my code:
Solution 1:
As far as I can tell, you want to have the footer at the bottom of the viewport, unless the main content is big enough to reach it, in which case you want the footer to come at the bottom of the page.
In my opinion, this is the best/cleanest way to do that:
functionaddContent() {
$('.maincontent').append('<p>more content</p>');
}html {
height: 100%;
}
body {
position: relative;
margin: 0;
min-height: 100%;
}
.maincontent {
padding-bottom: 1em;
/* or the footer height */
}
.footer-box {
position: absolute;
bottom: 0;
}<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script><html><head></head><body><divclass='navbar'><buttononclick="javascript:addContent()">add content</button></div><divclass='maincontent'>main content</div><footerclass='footer-box'>
footer content
</footer></body></html>Solution 2:
Solution 3:
It appears that you are using bootstrap, so this will work for you
<divclass="navbar navbar-default navbar-fixed-bottom"></div>Solution 4:
Even if the question is answered I want to propose a solution with flexboxes.
html {
height: 100%;
}
body {
min-height: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
main {
-webkit-box-flex: 1;
-webkit-flex: 10 auto;
-ms-flex: 10 auto;
flex: 10 auto;
background: blue;
}
footer{
height: 70px;
background: yellow;
}<main>
Main content
</main><footer>
Footer
</footer>Solution 5:
Try this :
footer.footer-box {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
}
Post a Comment for "How To Keep