AdSense

 

Create a div 100% of page height in IE, FF, Opera & Safari

Posted by webmaster on 31/12/2007 in Web Resources: Design
Permalink:

Whilst designing sites for an Art Gallery in Crieff(external link) and an Architect in Comrie, Perthshire(external link) I needed to have div's that spanned 100% of the height of the page.

The following was the most elegant solution, it works in FF1+, IE6+ (although a little buggy on Mac), Opera and Safari. First, include the following in your CSS file:

html,body {
height: 100%;
padding:0px;
margin:0px;
}

Then, apply the CSS attribute height:100%; to the required div. Unless the target is within an element with an overriding height attribute it will expand to the full height of the page. See the two links above for a demonstration.