Footer always on bottom with fixed header/height

Question

Ok, so I'm trying to figure out how to get this worked out:

<div id="wrapper">
    <div id="header"></div>
    <div id="container></div>
    <div id="footer></div>
</div>

The header should have a position: fixed (always on top of the screen) but the container-div should start below the fixed header div, not beneath it.

The footer should always be on the bottom of the page. Not fixed.

Is there an easy quick way to solve this (CSS)? I can get it 'almost' to work, but when I try to position the container-div below (instead of beneath) the header, the whole page messes up.

This is what I mean: http://jsfiddle.net/jskjvpkv/1/

I found my own solution, see my answer.

Answer 1

I'm not quite sure what your problem is:

If it is that the header isn't at the top try this in it's CSS:

top: auto;
bottom: 100%;

Footer should be:

position: static;
top: 100%;
bottom: auto;

If you are having the header overlay other elements you should add some padding:

padding-bottom: 10px; 

or however big your header is.

Answer 2

You need to add top: 0px to your header div and then assign margin-top to your container div which is equal to the height of the fixed header , like the following CSS:

 html, body { margin: 0; padding: 0; height: 100%; } #wrapper { min-height: 100%; position: relative; } #header { background: rgba(0, 0, 0, 1); height: 60px; position: fixed; width: 100%; top: 0px; } #container { margin-top: 60px; padding-bottom: 3.75em; background: #c00; height: 1000px; } #footer { position: absolute; bottom: 0; width: 100%; height: 3.75em; background: rgba(0, 0, 0, 0.5); } 

 <div id="wrapper"> <div id="header"></div> <div id="container">Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here.</div> <div id="footer"></div> </div> 

jsFiddle Demo .

Answer 3

You can make it like this

 html, body { margin: 0; padding: 0; height: 100%; } #wrapper { min-height: 100%; height: 100%; position: relative; } #header { background: rgba(0, 0, 0, 0.5); height: 60px; position: fixed; top: 0; left: 0; width: 100%; } #container { position: relative; top: 60px; background: #c00; min-height: calc(100% - 60px); } #footer { width: 100%; height: 3.75em; background: rgba(0, 0, 0, 0.5); position: relative; } 

 <div id="wrapper"> <div id="header"></div> <div id="container"></div> <div id="footer"></div> </div> 

Answer 4

This was the solution which worked best for me:

 html, body { margin:0; padding:0; height:100%; } #wrapper { min-height:100%; position:relative; } #header { background:#ededed; padding:10px; } #content { padding-bottom:100px; } #footer { background:#ffab62; width:100%; height:100px; position:absolute; bottom:0; left:0; } 

 <div id="wrapper"> <div id="header"></div> <div id="content"></div> <div id="footer"></div> </div>