Pura Coding

CSS - Have DIV fill remaining space in IE

It will come to no-ones surprise when I say that IE sucks when it comes to CSS. Apparently I’ve been well informed that IE8 will finally be CSS 2.1 compliant (but no CSS 3 at all)?!

A huge problem on the web, is people wanting to have a number of DIV elements with a fixed pixel height, and another which fills the remaining page like the image below:

IE makes this almost impossible due to it’s lack of compliancy.. But I have a fix which exploits the lack of compliance to get this to work!! (This has been tested in Firefox, IE7, and Safari)

Summary

1. IMPORTANT, for this fix to work do NOT add a doctype, leaving IE in quirks mode will make IE incorporate the padding into it’s box sizing model, which is key to this fix.
    
2. First set the height of the HTML and BODY elements to 100% via CSS, this will make any elements with a height of 100% fill the screen (rather than ignore it like it usually does):
   html, body { height: 100% }
    
3. Now add your two divs in (first will be fixed height, second will be the one that fills the screen:
   
<div id="masthead">MASTHEAD</div>
<div id="main-container">CONTENT</div>
    
4. Set the fixed height of the masthead (you might want to add a bg-color to prove the fix):
   masthead { height: 90px; width:100%; position:absolute; }
5. Now set the main-container’s CSS to fill the area and offset it’s content by the size of the masthead:
   #main-container { 
   height: 100%;
   padding-top: 93px;
   -webkit-box-sizing: border-box; /* Safari/WebKit */ 
   -moz-box-sizing: border-box; /* Firefox */
   -ms-box-sizing: border-box; /* IE8 */
   box-sizing: border-box; /* W3C Property */
}

And shazam!! You get a fixed size div with another div filling the remaining content!