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

199

我有一个包装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  height 
— 马丁
source
16
我真的希望w3c考虑在宽度上添加一些值减去常量属性，但他们忘记在宽度中包括边框，但是如果这两个条件都可用，他们应该改变了大多数CSS hacks的定义。
— 2011年

Answers:

79

这是一个正常工作的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>
展开摘要

— Alsciende
source
它可以在FF中使用，但我不能在IE7下使用。我只看到“标头”代码：<div id =“ header”>标头</ div> <div id =“ wrapper”> <div id =“ left”>左</ div> <div id =“ right”>对</ div> </ div>
— 马丁（Martijn），2009年
您是否触发了标准兼容模式？我将在响应中添加一个示例页面。
— Alsciende
1
另外，如果您需要将这些div放置在页面中间或其他任何位置，只需将它们包装在容器div中并position: relative放在容器上即可。然后将容器放在页面上您喜欢的任何位置。
— Mrchief 2011年
如果我想让2个div分别具有40％和60％的高度，那么内部div（例如在#left内部）呢？
— TecHunter
为什么在0值参数上指定px有特定的原因吗？
— 卡桑德拉（Cassandra）
274

在CSS3中，您可以使用 

height: calc(100% - 60px);
— libjup
source
25
确保在“-”符号前后有空格。Firefox需要在“-”号之前有空格。
— Codler
7
完善。我不知道CSS3可以做到这一点。
— 汤姆·比奇
哇！正是我想要的。谢谢。
— 桑杜
1
这太棒了
— Mirko
47

如果需要支持IE6，请使用JavaScript，因此请管理wrapper div的大小（在读取窗口大小后，以像素为单位设置元素的位置）。如果您不想使用JavaScript，则无法完成。有一些解决方法，但是希望在任何情况下以及在每种浏览器中都需要一两个星期的时间。

对于其他现代浏览器，请使用以下CSS：

position: absolute;
top: 60px;
bottom: 0px;
— 亚伦·迪古拉（Aaron Digulla）
source
该站点仅与IE 7兼容。当我使用height：100％and top：60px; 我仍然喜欢滚动条。我可以向下滚动60像素。
— Martijn
4
不要指定高度，使用top和bottom并让浏览器计算高度。
— 亚伦·迪古拉09年
但我希望页面的最大高度为100％减去60px；如果内容大于该值，则我希望通过使用溢出在div中使用滚动条：
— 马丁于2009年
4
对于滚动条，在包装器内部添加一个div，以将其完全填满，并使溢出：
— 亚伦·迪古拉
请注意，由于IE7中的错误，此操作仍可能失败。如果无法正常使用，请使用JavaScript。我知道，您不喜欢它，但可以将它与因拼写错误而挣扎的一周工作进行比较。
— 亚伦·迪古拉
6

好极了...现在我已经停止使用％他他他...除了如下所示的主容器：

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

我在所有已知的浏览器中对此进行了测试，并且工作正常。使用这种方式是否有任何弊端？

— 贾亚韦尔
source
4

您可以执行类似 height的操作：calc（100％-nPx）; 例如 高度：calc（100％-70px）;

— 博士
source
2 
div {
    height: 100%;
    height: -webkit-calc(100% - 60px);
    height: -moz-calc(100% - 60px);
    height: calc(100% - 60px);
}

确保少用 

height: ~calc(100% - 60px);

否则，将无法正确编译

— 达迪奇·苏拉夫（Dadhich Sourav）
source
0

这并不能完全回答所提出的问题，但是确实会产生您想要实现的相同视觉效果。

<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>
— 诺埃尔·沃尔特斯
source
0

在此示例中，您可以标识不同的区域：

<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>
— Renzo Ciot
source
0

我还没有看到这样的消息，但我想我已经把它放在那里了。 

<div class="main">
<header>Header</header>
<div class="content">Content</div>

然后是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;
}

这是一个工作的jsfiddle

注意：我不知道浏览器的兼容性是什么。我只是在尝试其他解决方案，这似乎很好用。

— 自由人
source
-1

使用设置为100％的外部包装div，然后您的内部包装div为100％现在应该相对于此。

我以为这肯定对我有用，但显然不是：

<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>
— 凯德·鲁（Cade Roux）
source
可以举一个例子。我不明白
— Martijn，2009年
我发布了我的想法，但无法在早期/后期使它正常工作。也许我多睡一会。
— Cade Roux
-1

如果您不想使用绝对定位和所有爵士乐，请使用以下修复方法：

您的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%;
}
— 苏格兰酷派
source
1
我认为这不符合预期。首先#header应该是margin-top:-60px;。其次，height:100%意味着高度将为父元素高度的100％，不包括边距，内边距和边框。根据您的滚动设置，这将导致滚动条出现或您的内容被裁剪。
— Kylos 2011年
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.