CSS如何设置div高度100％减去nPx [英] CSS How to set div height 100% minus nPx
问题描述
我有一个包装div，它包含两个div。在这个容器上面有一个div，其中包含我的标题。包装div必须为100％减去标头的高度。标题大约是60像素。这是固定的。所以我的问题是：如何设置高度我的包装div是100％减去60 px？
I have a wrapper div which contans 2 divs next to each other. Above this container I have a div that contains my header. The wrapper div must be 100% minus the height of the header. The header is about 60 px. This is fixed. So my question is: how do I set the height my wrapper div to be 100% minus the 60 px?
<div id="header"></div>
<div id="wrapper">
<div id="left"></div>
<div id="right"></div>
</div>
推荐答案
这是一个工作的css，在Firefox / IE7 / Safari / Chrome / Opera。
Here is a working css, tested under 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批准，但每个主要的浏览器都支持它。您的两个divs #left和#right将显示一个垂直滚动条，如果它们的内容太高。
"overflow-y" is not w3c-approved, but every major browser supports it. Your two divs #left and #right will display a vertical scrollbar if their content is too high.
为了在IE7下工作，您必须触发符合标准模式：添加DOCTYPE：
For this to work under IE7, you have to trigger the standards-compliant mode by adding a 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>
这篇关于CSS如何设置div高度100％减去nPx的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
