Jai Jai - 3 years ago 165
CSS Question

how can i extend a footer to bottom of page?

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 Source

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: 0px 500px 0px 500px #000;
}

This creates a shadow which will fall off the screen if not needed, but otherwise will give 1000px coverage to the space below the footer, so the body background doesn't appear below it.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download