我有一个包装div，其中包含2个div相邻。在这个容器上面，我有一个包含我的标题的div。包装器div必须是100%减去标题的高度。头部大约是60像素。这是固定的。我的问题是，如何设置包装器div的高度为100% - 60px ?
<div id="header"></div>
<div id="wrapper">
<div id="left"></div>
<div id="right"></div>
</div>
当前回答
伟大的……现在我已经不再使用% he he he…除了如下所示的主容器:
<div id="divContainer">
<div id="divHeader">
</div>
<div id="divContentArea">
<div id="divContentLeft">
</div>
<div id="divContentRight">
</div>
</div>
<div id="divFooter">
</div>
</div>
这是css:
#divContainer {
width: 100%;
height: 100%;
}
#divHeader {
position: absolute;
left: 0px;
top: 0px;
right: 0px;
height: 28px;
}
#divContentArea {
position: absolute;
left: 0px;
top: 30px;
right: 0px;
bottom: 30px;
}
#divContentLeft {
position: absolute;
top: 0px;
left: 0px;
width: 250px;
bottom: 0px;
}
#divContentRight {
position: absolute;
top: 0px;
left: 254px;
right: 0px;
bottom: 0px;
}
#divFooter {
position: absolute;
height: 28px;
left: 0px;
bottom: 0px;
right: 0px;
}
我在所有已知的浏览器中测试了这个功能，效果很好。使用这种方式有什么缺点吗?
其他回答
在CSS3中你可以使用
height: calc(100% - 60px);
div {
height: 100%;
height: -webkit-calc(100% - 60px);
height: -moz-calc(100% - 60px);
height: calc(100% - 60px);
}
在少用的同时确保
height: ~calc(100% - 60px);
否则less是无法正确编译的
如果你不想使用绝对定位和所有的爵士，这里有一个我喜欢使用的修复:
html:
<body>
<div id="header"></div>
<div id="wrapper"></div>
</body>
css:
body {
height:100%;
padding-top:60px;
}
#header {
margin-top:60px;
height:60px;
}
#wrapper {
height:100%;
}
如果您需要支持IE6，请使用JavaScript来管理包装器div的大小(读取窗口大小后设置元素的位置(以像素为单位)。如果您不想使用JavaScript，那么就不能这样做。有一些变通办法，但预计需要一到两周时间才能在每种情况下和每种浏览器中工作。
对于其他现代浏览器，使用以下css:
position: absolute;
top: 60px;
bottom: 0px;
你可以这样做:height: calc(100% - nPx);例如height: calc(100% - 70px);
