Question

我目前正在尝试将DIV扩展到浏览器高度的100％。我知道这是一个常见问题，所以已经阅读了无数的论坛，以便找到答案，但还没有找到适用于所有浏览器的东西。

我的CSS文件看起来像这样：

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%;
}

除了更高版本的Internet Explorer之外，所有浏览器都会出现预期效果，最明显的是IE7和IE8。我发现如果我在#wrapper上使用min-height而不是height，那么我会在有问题的浏览器中获得所需的结果，但这会在其他所有内容中弄乱渲染。我尝试过使用条件样式表，但指定的#wrapper样式似乎被忽略了。

非常感谢任何帮助。

Answer 1

这适用于所有浏览器，请确保使用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>

Answer 2

我发现这个问题的唯一可靠解决方案是使用javascript / jquery手动更改高度。也就是说，假设访问者启用了javascript。我有一个网站，有一个彩色的侧面菜单栏和一个白色的内容区域。两者都是div，一个是浮右，另一个是浮左。内容区域几乎总是比侧面菜单栏大，所以要使彩色边栏与我使用这个小jQuery片段的内容一样长。

<script language="javascript">
    <!--
        $(document).ready(function() {
            var p = $( "#pageContent" ).height();
            var m = $( "#menuContent" ).height();
            if (m < p) $( "#menuContent" ).height( p );
        });
    -->
</script>

最小高度Vs高度

2 个答案: