Question

我有2个div：

页面顶部的标题div，设置高度为150px。
位于标题div下的容器div。

我想要的是容器div是动态的，并调整大小为标题div下面剩余空间的100％。

我尝试过放入height: 100%，但这会让页面需要滚动。我认为它将div设为浏览器高度的100％而不是剩余身体高度的100％。

如何才能使容器div只将其高度调整为剩余的体空间？

请在下面找到相关代码：

body,
html {
  margin: 0;
  height: 100%;
}
#header {
  width: 100%;
  height: 150px;
  background-color: #999999;
}
#container {
  width: 760px;
  height: 100%;
  background-color: #CCCCCC;
  margin: 0 auto;
}

<div id="header"></div>
<div id="container"></div>

Answer 1

你可以通过calc() CSS function使用一些数学来做到这一点。从100％减去150px（标题大小）。这是动态计算的。

body,
html {
  margin: 0;
  height: 100%;
}
#header {
  width: 100%;
  height: 150px;
  background-color: #999999;
}
#container {
  width: 760px;
  height: calc(100% - 150px);
  background-color: #CCCCCC;
  margin: 0 auto;
}

most modern browsers and IE 9 +

支持 calc()

下面的示例fiddle和摘要：

body,
html {
  margin: 0;
  height: 100%;
}
#header {
  width: 100%;
  height: 150px;
  background-color: #999999;
}
#container {
  width: 760px;
  height: calc(100% - 150px);
  background-color: #CCCCCC;
  margin: 0 auto;
}

<div id="header"></div>
<div id="container"></div>

Answer 2

我认为在没有css hacks的情况下实现这一目标的正确现代方法是使用 FlexBox ，所有现代浏览器都支持这篇文章的撰写。 (you can check browser compatibility here)

它还为您提供了更大的灵活性。如果您以后决定添加新行（甚至是侧面列），则很容易在没有任何计算的情况下完成。

＆＃13;

html,
body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}
#container {
  display: flex; /* Activates FlexBox Model */
  flex-direction: column; /* Divs are spanned vertically */
  width: 100%; 
  height: 100%;
}
#header {
  background-color: #ccc;
  height: 150px;
}
#content {
  background-color: #888;
  flex-grow: 1;
}

＆＃13;

<div id="container">
  <div id="header">My header with some stuff</div>
  <div id="content">My content</div>
</div>

＆＃13;

Answer 3

外部容器必须有position: relative，并且要扩展到底部的div必须有position: absolute。这个解决方案是纯css，没有调用calc（）。

body, html {
    margin: 0;
    height: 100%;
}

#container {
    position: relative;
    width: 100%;
    height: 100%;
}

#header {
    height: 150px;
    width: 100%;
    background-color: #999999;
}

#mainContent {
    width: 760px;
    top: 150px;
    bottom: 0;
    right: 0;
    left: 0;
    background-color: #CCCCCC;
    margin: 0 auto;
    position: absolute;
}

JSFiddle：http://jsfiddle.net/wt0k73bz/

将div的高度设置为标题下剩余空间的100％

3 个答案: