Geek Answers Handbook

100% CSS layout with header and footer

I am trying to create a layout with a header and footer (both of which have a fixed height) and a content div between them that fills the remaining space. Inside the content-div, I want to have divs with heights that are based on percentage values ​​(with the content-div heihgt as the parent). I can not figure out how to do this?

Here is an illustration of what I'm trying to accomplish. layout example http://img22.imageshack.us/img22/45/layoutbz.png

+7
css layout height
source share
3 answers

[ Look at the 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; }
+5
source share
 .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%; }
+1
source share

To decide where the footer is attached to the bottom of the screen or the bottom of the content (depending on which is farther from the top), check out Ryan Fight's “sticky footer”. This is the easy and powerful part of CSS, and usually this is what you want for your layout.

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

0
source share

More articles:


All Articles