CSS 如何设置 div 高度 100% 减去 nPx
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1192783/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS How to set div height 100% minus nPx
提问by Martijn
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，其中包含 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>
采纳答案by Alsciende
Here is a working css, tested under Firefox / IE7 / Safari / Chrome / Opera.
这是一个有效的 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" 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.
“overflow-y”未经 w3c 批准，但每个主要浏览器都支持它。如果它们的内容太高，您的两个 div #left 和 #right 将显示垂直滚动条。
For this to work under IE7, you have to trigger the standards-compliant mode by adding a DOCTYPE :
要使其在 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>回答by libjup
In CSS3 you could use
在 CSS3 中，你可以使用
height: calc(100% - 60px);
回答by Aaron Digulla
If you need to support IE6, use JavaScript so manage the size of the wrapper div (set the position of the element in pixels after reading the window size). If you don't want to use JavaScript, then this can't be done. There are workarounds but expect a week or two to make it work in every case and in every browser.
如果需要支持 IE6，使用 JavaScript 来管理包装器 div 的大小（在读取窗口大小后以像素为单位设置元素的位置）。如果您不想使用 JavaScript，则无法完成此操作。有一些变通方法，但预计一两个星期才能使其在每种情况下和每种浏览器中都能正常工作。
For other modern browsers, use this css:
对于其他现代浏览器，请使用此 css：
position: absolute;
top: 60px;
bottom: 0px;
回答by Jayaveer
great one... now i have stopped using % he he he... except for the main container as shown below:
很棒的...现在我已经停止使用 % 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>
and here is the css:
这是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;
}
i tested this in all known browsers and is working fine. Are there any drawbacks using this way?
我在所有已知的浏览器中对此进行了测试，并且工作正常。使用这种方式有什么缺点吗？
回答by DrB
You can do something like height: calc(100% - nPx);for example height: calc(100% - 70px);
你可以做一些像 height: calc(100% - nPx); 例如 高度：calc(100% - 70px);
回答by Dadhich Sourav
div {
height: 100%;
height: -webkit-calc(100% - 60px);
height: -moz-calc(100% - 60px);
height: calc(100% - 60px);
}
Make sure while using less
确保同时使用较少
height: ~calc(100% - 60px);
Otherwise less is no going to compile it correctly
否则 less 不会正确编译它
回答by Renzo Ciot
In this example you can identify different areas:
在此示例中，您可以识别不同的区域：
<html>
<style>
#divContainer {
width: 100%;
height: 100%;
}
#divHeader {
position: absolute;
left: 0px;
top: 0px;
right: 0px;
height: 28px;
background-color:blue;
}
#divContentArea {
position: absolute;
left: 0px;
top: 30px;
right: 0px;
bottom: 30px;
}
#divContentLeft {
position: absolute;
top: 0px;
left: 0px;
width: 200px;
bottom: 0px;
background-color:red;
}
#divContentCenter {
position: absolute;
top: 0px;
left: 200px;
bottom: 0px;
right:200px;
background-color:yellow;
}
#divContentRight {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
width:200px;
background-color:red;
}
#divFooter {
position: absolute;
height: 28px;
left: 0px;
bottom: 0px;
right: 0px;
background-color:blue;
}
</style>
<body >
<div id="divContainer">
<div id="divHeader"> top
</div>
<div id="divContentArea">
<div id="divContentLeft">left
</div>
<div id="divContentCenter">center
</div>
<div id="divContentRight">right
</div>
</div>
<div id="divFooter">bottom
</div>
</div>
</body>
</html>
回答by FreedomMan
I haven't seen anything like this posted yet, but I thought I'd put it out there.
我还没有看到这样的帖子，但我想我会把它放在那里。
<div class="main">
<header>Header</header>
<div class="content">Content</div>
Then CSS:
然后CSS：
body, html {
height: 100%;
margin: 0;
padding: 0;
}
.main {
height: 100%;
padding-top: 50px;
box-sizing: border-box;
}
header {
height: 50px;
margin-top: -50px;
width: 100%;
background-color: #5078a5;
}
.content {
height: 100%;
background-color: #999999;
}
Here is a working jsfiddle
这是一个有效的jsfiddle
Note: I have no idea what the browser compatability is for this. I was just playing around with alternate solutions and this seemed to work well.
注意：我不知道浏览器兼容性是什么。我只是在玩替代解决方案，这似乎运作良好。
回答by Noel Walters
This doesn't exactly answer the question as posed, but it does create the same visual effect that you are trying to achieve.
这并不能完全回答所提出的问题，但它确实创造了您试图实现的相同视觉效果。
<style>
body {
border:0;
padding:0;
margin:0;
padding-top:60px;
}
#header {
position:absolute;
top:0;
height:60px;
width:100%;
}
#wrapper {
height:100%;
width:100%;
}
</style>
回答by Cade Roux
Use an outer wrapper div set to 100% and then your inner wrapper div 100% should be now relative to that.
使用设置为 100% 的外部包装器 div，然后你的内部包装器 div 100% 现在应该与它相关。
I thought for sure this used to work for me, but apparently not:
我确信这曾经对我有用，但显然不是：
<html>
<body>
<div id="outerwrapper" style="border : 1px solid red ; height : 100%">
<div id="header" style="border : 1px solid blue ; height : 60px"></div>
<div id="wrapper" style="border : 1px solid green ; height : 100% ; overflow : scroll ;">
<div id="left" style="height : 100% ; width : 50% ; overflow : scroll; float : left ; clear : left ;">Some text
on the left</div>
<div id="right" style="height : 100% ; width 50% ; overflow : scroll; float : left ;">Some Text on the
right</div>
</div>
</div>
</body>
</html>
