Stretchy Footer

Question

how would you make a footer container follow directly after the content and then stretch to the bottom of the page?

The setup is:

• header-container is fixed 150px height
• content-container stretches with whatever content should be inside
• footer-container follows stretches for the remainder of the page.

So far I either have the footer directly after content with white space following, or a footer stuck to the bottom with white space between the content and the footer

Answer 1

The actual styling can vary depending on whether you are sure your page will never by long enough to scroll. You can often use the body tag itself for this trick, but it is less flexible and not recommended.

The idea here is to create a very long footer div, and have it be contained by the element which contains the rest of your content. Since the overflow of the parent is hidden, the actual length of the div will be ignored.

This is often shown with a counter-balancing bottom padding, but in your case that shouldn't be needed.

<style>
   html,body,.bigDiv{height:100%}
   .header{height:150px}
   .footer{height:2000px; background-color:green;}
</style>

<div class="bigDiv" style="overflow:hidden;">

    <div class="header"></div>
    <div class="content">
       Content
    </div>
    <div class="footer">
        Footer
    </div>
</div>