Simple responsive design. How to create a sticky header and footer and then make div divs expand between them?

Question

Thanks for watching.

I am trying to make a very simple responsive HTML layout:

HTML:

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

CSS

 #header{ width: 100%; height: 50px; } #content{ width: 100%; height: 100%; } #footer{ width: 100%; height: 50px; } 

The end product should be a page with a 50px header attached to the top of the screen and a 50px footer attached to the bottom of the screen. Between the word "content" should expand to fill the gap between the header and footer, regardless of the size of this space.

I have already checked out a few sticky footer guides and, unfortunately, they are not exactly what I want, since they do not take into account the extension “content” in order to fill the gap between the header and footer.

This is a great example of what I need, but this site is written in Flash:

http://www.wearegolden.co.uk/

Try changing the screen size when viewing.

What am I missing here? Thanks!

DECIDE!

HTML:

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

CSS

 html, body {height: 100%; margin:0px !important;} #header{ position: fixed; top: 0; height: 50px; width: 100%; background-color: #777; z-index: 1; } #content{ padding-top: 50px; padding-bottom: 50px; background-color:#ffffcc; position: fixed; top:0px; bottom:0px; width:100%; } #footer{ background-color: #777; position: fixed; bottom: 0; height: 50px; width: 100%; z-index: 1; } 

THANKS!

Answer 1

sounds like you just need to fix the header and footer.

 header{position:fixed; top:0; z-index:10} footer{position:fixed; bottom:0; z-index:10} 

The contents of the main body will scroll between these fixed elements, if it is larger than space.

note I think its good practice is z-index 10 times. This gives you the flexibility to push an item onto your stack if it is skipped.

Answer 2

If you are looking for a simple solution, you can place the header and footer in a fixed position at the top and bottom of the page.

 .header { position: fixed; top: 0; height: 50px; width: 100%; background: #eee; } .footer { position: fixed; bottom: 0; height: 50px; width: 100%; background: #eee; } 

Here is an example:

http://codepen.io/anon/pen/eCEca

Alternatively, you may need to look at something like jQuery Mobile persistent navbars, which offers what you are looking for: http://view.jquerymobile.com/1.3.2/dist/demos/widgets/fixed-toolbars/footer- persist-a.html

Answer 3

Another approach is to use absolute positioning ( jsFiddle ):

 #header, #content, #footer { position: absolute; left: 0; right: 0; } #header { height: 50px; top: 0; } #content { top: 50px; bottom: 50px; } #footer { height: 50px; bottom: 0; }