Return

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

Posted by webmaster on 2007-12-31 03:49:52 in Web Resources: Design

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.

Permalink: http://stom66.co.uk/news/17/15/Create-a-div-100-of-page-height-in-IE-FF-Opera-Safari.html

Bookmark: Add 'Create a div 100% of page height in IE, FF, Opera & Safari' to Del.icio.us Add 'Create a div 100% of page height in IE, FF, Opera & Safari' to digg Add 'Create a div 100% of page height in IE, FF, Opera & Safari' to FURL Add 'Create a div 100% of page height in IE, FF, Opera & Safari' to Newsvine Add 'Create a div 100% of page height in IE, FF, Opera & Safari' to Stumble Upon Add 'Create a div 100% of page height in IE, FF, Opera & Safari' to Google Bookmarks Add 'Create a div 100% of page height in IE, FF, Opera & Safari' to Spurl Add 'Create a div 100% of page height in IE, FF, Opera & Safari' to Bloglines