How to keep the footer docked at the bottom of the page considering following structure?

Question

HTML:

<div id="header">
<div class="container"></div>
</div>

<div id="content">
<div class="container"></div>
</div>

<div id="footer">
<div class="container"></div>
</div>

CSS:

.container {
margin: 0 auto;
overflow: hidden;
width: 960px;
}

I want the footer to remain at the bottom of the page (not persistently), so that it remains at the bottom regardless of the height of the page.

How to accomplish that with the current structure?

do you mean at the bottom of the viewport? – laconbass May 01 '13 at 04:39 — laconbass, May 01 '13 at 04:39
@laconbass No, at the bottom of the "entire" page. – alexchenco May 01 '13 at 04:42 — alexchenco, May 01 '13 at 04:42
it is already at the bottom of the "entire" page – laconbass May 01 '13 at 04:53 — laconbass, May 01 '13 at 04:53

score 1 · Accepted Answer · answered May 01 '13 at 04:48

I haven't tested this css, but I think it'll do what you want:

html {
  width: 100%;
  height: 100%;
}
body {
  position: relative;
  width: 100%;
  height: 100%;
}
#footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}

The width/height properties ensure that the body is always at least the height of the viewport. You can then absolutely position the footer inside it to get it at the bottom. If the body's content goes over, the body will grow, and the footer will stay at the bottom of the body.

Now, there is a drawback: the footer may overlap the last bit of body content. To work around this, you could add this CSS to the body:

body {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding-bottom: 40px;
}

Substitute 40px for whatever the size of your footer is. By setting padding-bottom we reserve that space for the footer. The box-sizing properties ensure that this 40px (or whatever the right number is) gets reserved from that body height itself, and not added on at the bottom. Basically, it keeps vertical scrollbars from appearing when the page wouldn't naturally need to scroll.

score 0 · Answer 2 · answered May 01 '13 at 04:52

You got it done

It's already at the bottom of the "entire" page. No extra styles needed. see it on jsfiddle, with a background color for the container elements and some sample content within them.

I also recommend you using a more semantic html markup

<header>
    <!-- ... -->
</header>
<div id="content">
    <!-- ... -->
</div>
<footer>
    <!-- ... -->
</footer>

How to keep the footer docked at the bottom of the page considering following structure?

2 Answers2

You got it done