css - min-height Vs height -
i attempting div expand 100% of browser's height. know commonly asked question , have read countless forums in order find answer have yet find work across browsers.
my css file looks this:
html{height:100%;} body { background: #ffffff; font-size: 0.8em; line-height: 1.7; color: #09123e; height:100%; } #wrapper { background: #ffffff url(../images/assets/wrapper.bg.gif) repeat-y center center; margin: 0 auto; height:100%; }
this renders expected in browsers except later versions of internet explorer, notably ie7 , ie8. have found if use min-height instead of height on #wrapper desired result in problematic browsers messes rendering in else. have tried using conditional stylesheet #wrapper style specified seems ignored.
any appreciated.
this works fine in browsers, make sure use doctype!
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css"> * {margin: 0px; padding: 0px;} //reset margins, use css reset stylesheet instead... html {height: 100%;} body {height: 100%;} #wrapper { margin: 0 auto; height: 100%; } </style> </head> <body> <div id="wrapper"></div> </body> </html>
Comments
Post a Comment