how can i extend a footer to bottom of page?

Question

i have a layout like this

<section id="container">     <header></header>     <section id="main"></section>     <footer></footer> </section> 

At the moment my page is laid out like this:

------------------- |                 | 100px height |  HEADER         | |-----------------| |                 | |  MAIN           | 500px height |                 | |-----------------| |                 | |  FOOTER         | |-----------------| |                 | |                 | ------------------- 

I would like the footer to extend following the main content area to the bottom of the page, how can this be achieved?

------------------- |                 | 100px height |  HEADER         |  |-----------------| |                 | |  MAIN           | 500px height |                 | |-----------------| |                 | |  FOOTER         | |                 | |                 | |  FOOTER         | ------------------- 

NOTE: I have noticed all answers so far will pin the footer to tje bottom of the page, however when dragged the footer simply moves down/the main container expands, I want the footer to expand.

Answer 1

I was searching for a solution to this exact problem, and I came across a very simple way of achieving the effect I was going for:

footer {     box-shadow: 0 50vh 0 50vh #000; } 

This creates a shadow which will fall off the screen if not needed, but otherwise will give 100vh (a full viewport height's worth) of coverage to the space below the footer, so the body background doesn't appear below it.

Answer 2

Although this is marked answered, it doesn't seem to fully answer the OPs question. I had the same challenge and here is what I found to work:

1. Set your HTML & Body to 100% height
2. Ensure all of your content, including your footer is wrapped with a big div (site-container)
3. Fiddle with the space in the footer.

Here is the CSS:

html, body{     height: 100% }  .site-container{     overflow: hidden;     min-height: 100%;     min-width: 960px; }  .footer{     padding-bottom: 32000px;     margin-bottom: -32000px;  } 

I found this here: https://www.joestrong.co.uk/blog/2012/01/12/css-tip-extend-your-sites-footer-to-the-bottom-of-the-page/ which contains more info.