min-height Vs height
I am currently attempting to get a DIV to expand to 100% of the browser's height. I know that is a commonly asked question and so have read countless forums in order to find the answer but have yet to find something which will work across all browsers.
My CSS file looks something like 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 as expected in all browsers except later versions of Internet Explorer, most notably IE7 and IE8. I have found that if I use min-height instead of height on #w开发者_运维百科rapper then I get the desired result in the problematic browsers but this then messes up the rendering in everything else. I have tried using a conditional stylesheet but the #wrapper style specified just seems to get ignored.
Any help would be greatly appreciated.
This works fine in all browsers, make sure you 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 all margins, use some 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>
The only reliable solution to this problem that I've found is to use javascript/jquery to manually change the height. That is, assuming the visitor has javascript enabled. I have a site that has a colored side-menu bar and a white content area. Both are divs and one is float-right, and the other float-left. The content area is Almost always larger than the side menu bar, so to make the colored side bar as long as the content I use this little jQuery snippet.
<script language="javascript">
<!--
$(document).ready(function() {
var p = $( "#pageContent" ).height();
var m = $( "#menuContent" ).height();
if (m < p) $( "#menuContent" ).height( p );
});
-->
</script>
加载中,请稍侯......
精彩评论