让 div 填充父 div 的完整高度

Question

我想我尝试了 stackoverflow 上发布的所有解决方案，但肯定是正确的解决方案。 2 小时什么都没有，然后给 div 一个 100% 的高度，非常令人沮丧。

也许我只是累了（德国之夜），有人在几秒钟内就看到了正确的解决方案。

一切看起来都很棒，除了具有可重复背景图像的“layout_content_middle”类的 div。 “id=content” div 具有正确的 100% 高度，但内容 div 内的 conainer div 没有，这就是问题所在。

这是我当前的代码。 重要说明，这是一个引导项目，所以我使用容器和网格类。

html,
body {
  height: 100%;
}
#content {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  /* Negative indent header and footer by its height */
  margin: -80px auto -165px;
  /* Pad bottom by header and footer height */
  padding: 80px 0 165px;
}
/* Set the fixed height of the header here */

#header {
  height: 80px;
}
/* Set the fixed height of the footer here */

#footer {
  height: 165px;
}

<div id="header">
  <div class="container" style="max-width: 983px">
    <div class="row">
      <div class="col-xs-12">

      </div>
    </div>
    <div class="row">
      <div class="col-xs-12">
        <div class="layout_content_top"></div>
      </div>
    </div>
  </div>
</div>

<div id="content">
  <div class="container" style="max-width: 983px; background-color: red; height: 100%">
    <div class="row">
      <div class="col-xs-12">
        <div class="layout_content_middle">


          asdasd asd ad as das d as

          <br />asd
          <br />asd
          <br />asd
          <br />asd
          <br />asd
          <br />asd
          <br />asd
          <br />

        </div>
      </div>
    </div>
  </div>
</div>
<div id="footer">
  <div class="container" style="max-width: 983px">
    <div class="row">
      <div class="col-xs-12" style="padding-left: 16px">
        <div class="layout_footer"></div>
      </div>
    </div>
  </div>
</div>

Answer 1

您已为 height: auto 设置了 !important 规则，该规则会覆盖您的 height: 100%，使您的高度自动进行，这会导致您仅根据需要展开以适应内容。

所以需要删除以下规则：

#content {
  height: auto !important;
}

---

在这里查看它的实际效果：

html,
body {
  height: 100%;
}
#content {
  min-height: 100%;
  height: 100%;
  /* Negative indent header and footer by its height */
  margin: -80px auto -165px;
  /* Pad bottom by header and footer height */
  padding: 80px 0 165px;
}
/* Set the fixed height of the header here */

#header {
  height: 80px;
}
/* Set the fixed height of the footer here */

#footer {
  height: 165px;
}

<div id="header">
  <div class="container" style="max-width: 983px">
    <div class="row">
      <div class="col-xs-12">

      </div>
    </div>
    <div class="row">
      <div class="col-xs-12">
        <div class="layout_content_top"></div>
      </div>
    </div>
  </div>
</div>

<div id="content">
  <div class="container" style="max-width: 983px; background-color: red; height: 100%">
    <div class="row">
      <div class="col-xs-12">
        <div class="layout_content_middle">


          asdasd asd ad as das d as

          <br />asd
          <br />asd
          <br />asd
          <br />asd
          <br />asd
          <br />asd
          <br />asd
          <br />

        </div>
      </div>
    </div>
  </div>
</div>
<div id="footer">
  <div class="container" style="max-width: 983px">
    <div class="row">
      <div class="col-xs-12" style="padding-left: 16px">
        <div class="layout_footer"></div>
      </div>
    </div>
  </div>
</div>

Answer 2

你可以在父级上使用position: relative，然后添加position: absolute; top: 0; bottom: 0;，如果要填充宽度，则添加左右。