CSS - Place the footer on the bottom of the page even if not enough content

Question

With HTML / CSS, I need to get the footer be placed on the bottom of the page even if there is no enough content.

In case there is a lot of content causing a scroll, is very easy to achieve this. The problem came up when there is not enough content because in that case, the footer goes up.

Here you have an image that could clarify this more:

I have the following starting code:

CSS

body {
    margin: 0;
}
#header, #content, #footer {
    padding: 10px;
}
#header {
    height: 100px;
    background-color: #abcdef;
}
#content {
    bottom: 100px;
    left: 0;
    right: 0;
    background-color: #F63;
    overflow: auto;
}
#footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100px;
    background-color: #abcdef;
}

HTML

<div id="header">
There is the Header
</div>
<div id="content">
    hello world<br/>
    hello world<br/>
    hello world<br/>
    hello world<br/>
    hello world<br/>
    hello world<br/>
    hello world<br/>
    hello world<br/>
    hello world<br/>
    hello world<br/>
    hello world<br/>
    hello world<br/>
    hello world<br/>
    hello world<br/>
    hello world<br/>
</div>
<div id="footer">
There is the Footer
</div>

Jsfiddle preview: https://jsfiddle.net/bk5ow9us/ (try resizing the height of the window)

Any idea on how to achieve this?

IMPORTANT

I need a working solution also for IE (ver >= 11), not just FF and Chrome.

FYI there are about 3,000 questions (literally) that already ask this on the site. I bet you could find the answer with a little searching. — TylerH, Apr 18 '17 at 16:58
Ofc it's a duplicate, this question is asked almost everyday. We should point them to the SO docs that's the whole point of them — StefanBob, Apr 18 '17 at 16:58
@StefanBob I'm waiting for them to implement closing questions as pointers to SO Docs... — TylerH, Apr 18 '17 at 16:59

score 1 · Answer 1 · edited Sep 29 '17 at 10:05

1

You can use a flexbox sticky footer layout if you'd like.

I would use min-height: 100vh; instead of height: 100%; though

html, body {
  min-height: 100vh;
}

body {
  display: flex;
  flex-direction: column;
  margin: 0;
}

.content {
  /* Include `0 auto` for best browser compatibility. */
  flex: 1 0 auto;
}

.header, .footer {
  background-color: grey;
  color: white;
}

<div class="header">
  <h2>Header</h2>
</div>

<div class="content">
  <h1>Content</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. </p>
</div>

<div class="footer">
  <h4>Footer</h4>
</div>

edited Sep 29 '17 at 10:05

Graham

7,431
18
59
84

answered Apr 18 '17 at 16:52

StefanBob

4,857
2
32
38

do you have a jsfiddle example? – Angel Apr 18 '17 at 16:54
updated answer, even though you can just copy + paste as i did – StefanBob Apr 18 '17 at 16:56
It doesn't work on IE, check this image: http://image.ibb.co/m1UAvk/image.png, do I have to add something to the CSS to make it works there? – Angel Apr 18 '17 at 17:07
Might have to use prefixes in older versions of IE. You can grab them here http://the-echoplex.net/flexyboxes/ – StefanBob Apr 18 '17 at 17:13
I used this configuration: http://mcaf.ee/jyvr1m, but again, working on FF and Chrome but not on IE11. Could you try on your IE, tweak the configuration and then give me the link back?, thanks. – Angel Apr 18 '17 at 17:31
No don't use all of the code there. Just what you need. So display: flex; for example you can see on that site it's display: -ms-flexbox; display: -webkit-flex; display: flex; etc – StefanBob Apr 18 '17 at 18:05
Tried "-ms-flexbox" for IE11 with no success :( – Angel Apr 18 '17 at 18:17
You know what i'm sorry. I think you actually do need height: 100% as well as the min-height for IE. http://stackoverflow.com/questions/21600345/flexbox-and-internet-explorer-11-displayflex-in-html – StefanBob Apr 18 '17 at 18:22

score 0 · Answer 2 · answered Apr 18 '17 at 17:00

You can do this two ways. One is using flexbox, and setting the content area to flex-grow so it fills the available space by default.

body {
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
#header, #content, #footer {
 padding: 10px;
}
#header {
    height: 100px;
    background-color: #abcdef;
}
#content {
    flex: 1 0 0;
    background-color: #F63;
}
#footer {
    height: 100px;
    background-color: #abcdef;
}

<div id="header">
There is the Header
</div>
<div id="content">
 hello world<br/>
 hello world<br/>
 hello world<br/>
 hello world<br/>
 hello world<br/>
 hello world<br/>
 hello world<br/>
 hello world<br/>
 hello world<br/>
 hello world<br/>
 hello world<br/>
 hello world<br/>
 hello world<br/>
 hello world<br/>
 hello world<br/>
 hello world<br/>
 hello world<br/>
</div>
<div id="footer">
There is the Footer
</div>

Or you can absolutely position the footer, and use padding on body to reserve the space where the footer will be.

* {box-sizing:border-box;}
body {
    margin: 0;
    padding-bottom: 100px;
    position: relative;
}
#header, #content, #footer {
 padding: 10px;
}
#header {
    height: 100px;
    background-color: #abcdef;
}
#content {
    left: 0;
    right: 0;
    background-color: #F63;
}
#footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100px;
    background-color: #abcdef;
}

<div id="header">
There is the Header
</div>
<div id="content">
 hello world<br/>
 hello world<br/>
 hello world<br/>
 hello world<br/>
 hello world<br/>
 hello world<br/>
 hello world<br/>
 hello world<br/>
 hello world<br/>
 hello world<br/>
 hello world<br/>
 hello world<br/>hello world<br/>
 hello world<br/>
 hello world<br/>
 hello world<br/>
 hello world<br/>
 hello world<br/>
 hello world<br/>
 hello world<br/>
 hello world<br/>
 hello world<br/>
 hello world<br/>
 hello world<br/>
 hello world<br/>
 hello world<br/>
 hello world<br/>
</div>
<div id="footer">
There is the Footer
</div>

score -1 · Answer 3 · answered Apr 18 '17 at 16:56

-1

I had the same problem. This solved it.

#footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
}

answered Apr 18 '17 at 16:56

chhhris

355
1
4
16

CSS - Place the footer on the bottom of the page even if not enough content

3 Answers3

Linked

Related