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:
function addContent() {
$('.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;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<html>
<head></head>
<body>
<div class='navbar'>
<button onclick="javascript:addContent()">add content</button>
</div>
<div class='maincontent'>main content</div>
<footer class='footer-box'>
footer content
</footer>
</body>
</html>Solution 2:
Solution 3:
It appears that you are using bootstrap, so this will work for you
<div class="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: 1 0 auto;
-ms-flex: 1 0 auto;
flex: 1 0 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