I have http://jsfiddle.net/EN8CX/
What I want to do first is set the default page to have the footer at the bottom. Is there a better way than modifying the content's height?
#content {
min-height:200px;}
I'm asking this because I can't set a fixed height for the content. Later on I will add a search function which might have to display more results than the page, so I'll need a scroll bar. That will push the footer down, of course. How can I do it?
I myself was in this same predicament and took me a while to figure this out. But I think I got it! So you would have to modify your HTML a little bit. You need to take out the footer and place it in the same level as the container. So it'll look something like this:
<body>
<div id="container">
...
</div>
<div id="footer">
...
</div>
</body>
In the CSS, make the "container" with the minimum height of the whole viewport using "vh" units. Then take the footer height and use it to pad the bottom of the content. Take the footer and reverse the margin upward to make it peak through using again the height of the footer:
#container {
...
min-height: 100vh;
}
#content {
...
padding-bottom: 70px; // if footer height = 70px;
}
#footer {
...
margin-top: -70px;
}
I have a fiddle running here: http://jsfiddle.net/EN8CX/5/ . I also added a button to grow the content so you can see the footer get pushed down.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments