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

【问题标题】：Set height of div to 100% of remaining space under header将 div 的高度设置为标题下剩余空间的 100%
【发布时间】：2014-12-26 23:54:43
【问题描述】：

我有 2 个 div：

页面顶部的标题 div，设置高度为 150 像素。
位于标题 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>

【问题讨论】：

标签： javascript html css

【解决方案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;
}

兼容性： calc() 在 most modern browsers and IE 9 + 中受支持

fiddle 和下面的 sn-p 示例：

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>

【讨论】：

值得注意的是，浏览器对此的支持并不出色。我会特别担心 4.4 之前的 Android 缺乏支持。 caniuse.com/#feat=calc
@SteveSanders 值得一提的是，我也为这个网站添加了书签，看起来确实非常有用和有趣。
@Tom - 您可以通过提供未优化的高度高于计算高度来覆盖不受支持的浏览器。像height: 90%; height: calc(100% - 150px); 这样的东西，不支持的浏览器会优雅地降级，留出太多的空格。

【解决方案2】：

我认为在没有 css hack 的情况下完成此任务的正确现代方法是使用 FlexBox，在撰写本文时，所有现代浏览器都支持该方法。 (you can check browser compatibility here)

它还为您提供了更大的灵活性。如果您稍后决定添加新行（甚至是侧列），则无需任何计算即可轻松完成。

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

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

【讨论】：

+1 - 尽管容器或 html,body 上不需要 100% 的宽度或高度。只需将min-height: 100vh 放在容器上，它就会根据内容很好地调整大小。使用现代 CSS 属性时，最好使用现代长度 :)
@misterManSam 确实如此。并且对视口单元的支持比 FlexBox 稍差。所有现代浏览器（除了 IE、ofc、lol）都完全支持它。

【解决方案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/

【讨论】：