html - 内容框应扩展到页脚，即使是空的

Question

即使内容框为空，我也需要内容框到达页脚。我只想使用 CSS 来实现这一点。

1. padding-bottom 不是一个选项。
2. 我不想使用背景图片，例如 background-image: url center repeat-y;

我怎样才能做到这一点？

.wrap {
  height: 100%;
}
.l-col {
  padding-top: 0;
  height: 100%;
}
.footer {
  position: relative;
  height: 60px;
  clear: both;
  float: left;
  width: 100%;
  z-index: 3;
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="wrap">
  <div class="container">
    <div class="col-xs-12 l-col">
      <div class="col-xs-12" style="padding:0px">
        <table>Content</table>
      </div>
    </div>
  </div>
</div>

---

当前布局:

---

所需布局:

Answer 1

使用 CSS calc()函数，您可以使用计算内容 div 的最小高度。

body {
  margin: 0
}

.header,
.footer {
  width: 100%;
  height: 60px;
  background-color: grey;
}

.content {
  width: 100%;
  min-height: calc(100vh - 120px);
  background-color: #FFF8DC;
}

<div class="wrap">
  <div class="container">
    <div class="header">
      Header
    </div>

    <div class="content">
      Content
    </div>

    <div class="footer">
      Footer
    </div>
  </div>
</div>

如果您首选的方法是 jQuery，则即使在调整页面大小时，以下代码也能正常工作。

function setContentHeight() {
  var headerHeight = $(".header").height();
  var footerHeight = $(".footer").height();
  var winHeight = $(window).height();
  $(".content").css("min-height", winHeight-(headerHeight+footerHeight));
}

setContentHeight();
$(window).resize(setContentHeight);