100% Css-layout with header and footer

Question

I'm trying to create a layout with a header and footer (both of which have a fixed heights) and a content-div between them that is fills the remaining space. Within the content-div I want to have divs with heights that are based on percent values (with the content-div's heihgt as parent). I can't figure out how to do this?

Here is an illustration of what I'm trying to accomplish.

score 5 · Accepted Answer · answered Jul 06 '10 at 12:37

5

[See it in action]

  #header { 
    position:absolute; 
    height: 50px; 
    left:0; 
    top:0; 
    width:100%; 
    background:green;
  }

  #footer { 
    position:absolute; 
    height: 50px; 
    left:0; 
    bottom:0; 
    width:100%;
    background:green;
  }

  #content { 
    position: absolute; 
    top:50px; 
    bottom:50px; 
    left:0;
    width:100%;
    background:#eee; 
  }

  #box1 { 
    height:50%; 
    width:30%; 
    float:left; 
    background:red; 
  }

answered Jul 06 '10 at 12:37

gblazex

45,901
12
91
86

Thanks! I forgot to mention that I wanted to place the boxes absolute within the content-div, but it worked without any problem at all to set them to "position:absolute;" – Snail Jul 06 '10 at 12:50
1

One problem with this solution: when the content pushes down past the bottom of the viewport, scrolling down leaves the footer hanging over the top of the content... :/ – aaaidan Nov 19 '12 at 01:49
2

@aaaidan Just add `overflow` css property to `#content`. See in action : http://jsbin.com/erawu3/63 – enguerran May 03 '13 at 10:22

score 1 · Answer 2 · answered Jul 06 '10 at 12:32

1

.header {
  position: absolute;
  height: 50px;
  left: 0;
  top: 0;
  right: 0;
}

.footer {
  position: absolute;
  height: 50px;
  left: 0;
  bottom: 0;
  right: 0;
}

.content {
  position: absolute
  top: 50px;
  left: 0px;
  right: 0px;
  bottom: 50px;
}

.box1 {
  width: 30%;
  height: 50%;
}

answered Jul 06 '10 at 12:32

Robusto

29,248
8
52
76

You mean to say that using classes is a better idea? – aaaidan Nov 19 '12 at 01:51
@aaaidan: I prefer classes for most things, because I don't like to lard up the page with IDs that might not always be unique. Then again, I use jQuery, which makes them just as easy to reference as the IDs without that worry. That said, I do use IDs where I feel they're warranted because sometimes you need the extra [selector weight](http://stackoverflow.com/a/2253459/271917). – Robusto Nov 19 '12 at 02:07
I agree with you totally. Just wanted to hear you say it... :) – aaaidan Nov 20 '12 at 05:20

score 0 · Answer 3 · answered Nov 20 '12 at 05:24

For a solution where the footer sticks to the bottom of the screen or the bottom of the content (whichever is further from the top), check out Ryan Fait's "sticky footer". It's a lightweight and robust handful of CSS, and it's usually what you want for your layout.

http://ryanfait.com/sticky-footer/

100% Css-layout with header and footer

3 Answers3

[See it in action]