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.

currently its just width:100%; height:300px; display:block; background:#000; — Jai, Mar 16 '12 at 17:21
I thinkl this answers your question: http://stackoverflow.com/questions/526035/html-css-positioning-float-bottom — Liam, Mar 16 '12 at 17:22
Change the CSS so the position is absolute and bottom is zero. — j08691, Mar 16 '12 at 17:23
If you use the above example don't forget to pad the bottom of the parent container or the content at the bottom could be masked by the footer. — Tim Wickstrom, Mar 16 '12 at 17:24
depending on your objective and browser compatibility you could simply used position:fixed NOTE(IE 5/6 don’t support position: fixed) but who cares ;) — Tim Wickstrom, Mar 16 '12 at 17:25
Thank you all for the answers, however the answers so far are not *extending* the footer to the bottom of the page, they are simply *fixing* it to the bottom. I asked how to extend. The closest answer is Tim's about setting the body bg etc... but i really would rather not use this method. — Jai, Mar 17 '12 at 14:28

score 163 · Accepted Answer · edited Mar 05 '18 at 22:50

163

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.

edited Mar 05 '18 at 22:50

tremby

9,541
4
55
74

answered Sep 21 '13 at 16:59

c4collins

1,789
1
14
15

1

I had a large background image on the body and a partially transparent footer so none of the other answers could have worked. This worked perfectly! – Peter Apr 15 '14 at 20:42
1

Same as @peter - had a background image on body and a broken foot on shorter pages or high resolutions. This was the fix. – lewsid Sep 06 '14 at 11:31
2

I also had to add `body { height: 100%; }` for this to work, but great solution. – Novocaine Nov 05 '15 at 10:05
1

I used this on a body:after pseudo element and it worked great! Thanks. – Gordon Smith Apr 06 '16 at 20:14
1

0px should be "0" and 500px might not be enough. Other than that good solution – Type-Style Sep 08 '16 at 13:23
1

If you're just looking to extend the color all the way down, this is a very elegant, and stupidly simple to implement solution. Thanks! – Kaji May 10 '17 at 07:02
2

work like a charm! stretch footer color to bottom, simple and elegant. Thanks! – YugoAmaryl Jul 12 '17 at 03:33
3

I can't make up my mind whether I like or hate this solution, but it sure works. I worry about performance. Regardless, it's better to use `50vh` rather than a precise length. Submitted an edit. – tremby Mar 05 '18 at 22:46
Why is there `50vh` twice instead of one `100vh`? – Aaron Franke Sep 03 '19 at 17:16
2

Works like a charm! – sdasara Jun 01 '20 at 23:14

score 8 · Answer 2 · edited Feb 19 '16 at 10:04

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:

Set your HTML & Body to 100% height
Ensure all of your content, including your footer is wrapped with a big div (site-container)
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.

score 6 · Answer 3 · answered Mar 16 '12 at 17:22

6

I would create the illusion that the footer extends to the bottom if possible.

Say footer background color is #000000;

Set the body background color to #000000

and make sure

spans 100% width.

the color #00000 is for example purposes only you may need an image slice or the lat color used in a gradient etc...

answered Mar 16 '12 at 17:22

Tim Wickstrom

5,476
3
25
33

2

this, **is** the effect i'm trying to achieve, however its not really extending the footer, which is how i'd like to accomplish it. +1 – Jai Mar 17 '12 at 14:34
If you want your footer to have a dynamic height, this is the way to do it. if it is a fixed height I would use one of the answers above OR use javascript to sniff out ready events and resize events to calc the body height! Hope this helps! – Tim Wickstrom Mar 19 '12 at 16:45

score 4 · Answer 4 · answered Mar 16 '12 at 17:28

4

This should do the trick http://jsfiddle.net/fXf4K/

answered Mar 16 '12 at 17:28

Ryan

2,433
5
31
41

this, **is** the effect i'm trying to achieve, however its not really extending the footer, which is how i'd like to accomplish it. +1 – Jai Mar 17 '12 at 14:33
Can you give us an example of what exactly you are trying to do? What if you just give the footer a fixed height? – Ryan Mar 17 '12 at 18:12

score 2 · Answer 5 · answered May 09 '13 at 18:56

I had the same problem and found this to work - so long as the footer is out on its own, i.e. not within a container div or anything.

Basically, I needed my content to be fixed width and centred on a white background with a horizontally repeating background image in the body tag extending the full width of the browser window, providing a nice band beneath the header. I wanted the footer to be in a dark colour and extend to the bottom of the page regardless of the height of the content and browser window size.

My page (very simply) was as follows:

<!DOCTYPE HTML>
<html>
<head>usual stuff</head>
<body>
<div id="container">
<header>fixed height and containing various stuff</header>
<div id="sidebar">floated left and containing nav</div>
<div id="content">floated left and containing various stuff</div>
<div class="clearfloat"></div>
<!-- end container --></div>
<footer>various stuff, address etc.</footer>
</body>
</html>

Then in the css include these rules (along with all the other styles):

html, body {
    height: 100%;
    overflow: hidden;
}

    footer {
    height: 100%;
}

The hidden overflow removed the annoying scrollbar caused by the 100% html and body height compensating for the height of the container and extending beyond the browser window.

score 2 · Answer 6 · answered Mar 16 '12 at 20:39

2

You can use a sticky footer to achieve that effect, like the one listed here, and apply it to your design to push your footer to the bottom of the document, like in this demo i put up:

Demo, edit here.

answered Mar 16 '12 at 20:39

Andres I Perez

75,075
21
157
138

thomaschall · Answer 7 · 2017-10-01T13:41:23.557

1

Similar to @c4collins, you can use view height instead of a fixed pixel, in case someone has a huge monitor

footer{
  box-shadow: 0 100vh 0 100vh #000000;
}

edited Oct 01 '17 at 13:41

answered Sep 30 '17 at 00:47

thomaschall

11
2

You should refer to the name of the person whose answer you're referring to because it's not immediately obvious which one you mean. – Jaquez Sep 30 '17 at 01:39

score 1 · Answer 8 · answered Mar 16 '12 at 17:29

1

Try the below fiddle which is demonstrating the concept how to keep the footer at bottom always.

Fiddle: http://jsfiddle.net/evTb4/

Demo: http://jsfiddle.net/evTb4/embedded/result/

answered Mar 16 '12 at 17:29

w3uiguru

5,864
2
21
25

thanks, but doesn't really answer the question, I don't want the footer to stick to the bottom, i want it to extend its height. – Jai Mar 17 '12 at 14:32

how can i extend a footer to bottom of page?

8 Answers8