News categories
General
Website Development
Misc Software
Internet and Email
Windows
Stom66 Announcements
Web Resources: SEO
Web Resources: Design
Hardware
AdSense
Create a div 100% of page height in IE, FF, Opera & Safari
Posted by webmaster on 31/12/2007 in Web Resources: DesignPermalink:
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.