CSS如何设置div高度减去nPx

2018-06-10 02:37:27

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

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

“overflow-y”不是W3C认可的，但每个主流浏览器都支持它。您的两个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>

在CSS3中，你可以使用

height: calc(100% - 60px);

如果您需要支持IE6，请使用JavaScript，以便管理包装div的大小（在阅读窗口大小后设置元素的位置，以像素为单位）。如果你不想使用JavaScript，那么这是无法完成的。有解决方法，但期望一两个星期，使其在任何情况下，并在每个浏览器。

对于其他现代浏览器，使用这个CSS：

position: absolute;
top: 60px;
bottom: 0px;

链接地址: http://www.djcxy.com/p/29997.html

上一篇: CSS How to set div height 100% minus nPx

下一篇: block will not change elements in my unordered list to horizontal display