The new css 100% width and height with header and sidebar
It’s been a while since I’ve had to deal with making a cross-browser 100% height layout - long enough that a couple version of IE have come out since. CSS support in IE has come a long way, so I thought I’d start fresh and try a purely standards based approach for the latest IE and standards based browsers, using the ‘display: table-*’ styles, and just do a fallback for older versions of IE (a 100% height modified Holy Grail layout that relies on the IE quirks box-model).
Unfortunately, while IE8 does support the table display styles, IE7 doesn’t, and there doesn’t seem to be any way to put IE7 in quirks mode, while keeping IE8 and every other browser in standards mode. So I just settled on the old-fashioned approach of having one layout for all other browsers and keeping the IEs clumped together in quirks mode.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 | <!— keep IE in quirks mode —> <!DOCTYPE html> <html> <head> <!— This following meta tag does no good since there is no way to trigger quirks mode only in IE7. The problems with an xml prolog that triggered quirks mode were fixed in IE7, but this meta tag was not yet introduced, so the only thing you can do is trigger IE-wide quirks via the comment before the DOCTYPE //—> <meta http-equiv=“X-UA-Compatible” content=“IE=EmulateIE8” /> <style type=“text/css”> /*You still need an unbroken chain of 100% from the viewport down to the ‘table’ container*/ html, body, #wrapper { margin: 0px; padding: 0px; height:100%; } /* This is the heart of the new layout. You don’t even need to worry about min-height vs. height issues, because table handle those fine without weird issues when the browser window becomes smaller than the content.*/ #wrapper { display: table; width: 100%; } #header { display: table-row; height: 99px; } #logo { display: table-cell; } #header_contents { display: table-cell; } #container { display: table-row; } /* This is the one min-X needed, it prevents the sidebar from collapsing down to it’s contents width when the containing div tries to shrink due to the window being shrunk down*/ #sidebar { display: table-cell; width: 200px; min-width: 200px; vertical-align: top;} #content { display: table-cell; } /* Fluff, purely for illustration of the containers */ .box { width: 100px; height: 100px; background: grey; } #content .box { width: 300px; } #header_contents { border: 2px solid green; background-color: #cfc; } #sidebar { border: 1px solid blue; background-color: #ccf; } #content { border: 2px solid red; background-color: #fcc; } </style> <!— The quirks mode based IE approach below. Since in that box model paddings and margins are not additive with the contents width/height, you can just add some paddings to the parent. For an explanation of the sidebar negative margin tricks, google ‘holy grail css.’ And the header is just absolutely positioned over the space created by the padding trick on the container //—> <!—[if IE]> <style type=”text/css”> #wrapper, #logo, #header, #container, #sidebar, #content { display: block } #header { position: absolute; padding-left: 200px; } #logo { float:left; height:100%; width:200px; margin-left: -200px; } #header_contents { height: 100%; width:100%; float:left;} #sidebar { float: left; height: 100%; margin-left: -200px; } #container { height: 100%; padding-top: 99px; padding-left: 200px; } #content { height: 100%; width: 100%; float: left; } </style> <![endif]—> </head> <body> <div id=“wrapper”> <div id=“header”> <div id=“logo”>Logo</div><div id=“header_contents”>Header</div> </div> <div id=“container”> <div id=“sidebar”><div class=“box”>Sidebar</div></div> <div id=“content”> <div class=“box”></div> </div> </div> </div> </body> </html> |
