CSS如何将div高度设置为100％减去nPx

马丁

我有一个包装div，彼此相邻包含2个div。在此容器上方，我有一个包含我的标头的div。包装div必须为100％减去标题的高度。标头约为60像素。这是固定的。所以我的问题是：如何将包装div的高度设置为100％减去60像素？

<div id="header"></div>
<div id="wrapper">
  <div id="left"></div>
  <div id="right"></div>
</div>

最后

这是一个正常工作的CSS，已在Firefox / IE7 / Safari / Chrome / Opera下进行了测试。

* {margin:0px;padding:0px;overflow:hidden}
div {position:absolute}
div#header {top:0px;left:0px;right:0px;height:60px}
div#wrapper {top:60px;left:0px;right:0px;bottom:0px;}
div#left {top:0px;bottom:0px;left:0px;width:50%;overflow-y:auto}
div#right {top:0px;bottom:0px;right:0px;width:50%;overflow-y:auto}

w3c尚未批准“ overflow-y”，但每个主流浏览器都支持它。如果两个div的#left和#right的内容过高，它们将显示垂直滚动条。

为了在IE7下工作，您必须通过添加DOCTYPE来触发符合标准的模式：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
	*{margin:0px;padding:0px;overflow:hidden}
	div{position:absolute}
	div#header{top:0px;left:0px;right:0px;height:60px}
	div#wrapper{top:60px;left:0px;right:0px;bottom:0px;}
	div#left{top:0px;bottom:0px;left:0px;width:50%;overflow-y:auto}
	div#right{top:0px;bottom:0px;right:0px;width:50%;overflow-y:auto}
</style>
</head>
<body>
<div id="header"></div>
<div id="wrapper">
  <div id="left"><div style="height:1000px">high content</div></div>
  <div id="right"></div>
</div>
</body>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。