如何使DIV填充浏览器窗口的剩余垂直空间？

Question

我有这个简化的代码：

This is a line of text<br/>
<div style="background-color: orange; height: 100%">And this is a div</div>

div高度最终是浏览器窗口客户端空间高度的100％，它与文本行的高度相加，大于窗口高度，因此您必须滚动。

如何设置div高度，使浏览器窗口的高度减去文本行？

或者，换句话说，我如何让div垂直占用所有其他DOM对象已经占用的空间？

Answer 1

我也遇到了同样的问题。 这是我找到的解决方案：

<style>
.container{
    position: relative;
    height: 100%;
}
.top-div{
    /* height can be here. if you want it*/
}
.content{
    position:absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 1em; /* or whatever height of upper div*/
    background: red;
}
</style>
<div class="container">
    <div class="top-div">This is a line of text</div>
    <div class="content">And this is a div</div>
</div>

来源 - http://www.codingforums.com/archive/index.php/t-142757.html

Answer 2

最终，你会想拥有一个容器。 “overflow：hidden”将隐藏溢出容器的任何内容。 如果我们没有使用那个，那么我们会看到你上面提到的关于“......超过窗口高度，所以你必须滚动”的问题。

  <div id="container" style="color:white;height:500px;background-color:black;overflow:hidden;">
    This is the container
    <div style="height:100%;background-color:orange;">
      This div should take the rest of the height (of the container).
    </div>
  </div>

隐藏溢出的示例： http ： //jsbin.com/oxico5

没有溢出隐藏的示例： http ： //jsbin.com/otaru5/2

Answer 3

这可以使用display: table; 无需知道任何明确的高度值。

在这里演示： http ： //codepen.io/shanomurphy/pen/jbPMLX

html, body {
  height: 100%; // required to make .layout 100% height
}

.layout {
  display: table;
  width: 100%;
  height: 100%;
}

.layout__row {
  display: table-row;
}

.layout__cell {
  display: table-cell;
  vertical-align: middle;
}

.layout__cell--last {
  height: 100%; // force fill remaining vertical space
}

<div class="layout">
  <div class="layout__row">
    <div class="layout__cell">
      Row 1 content
    </div>
  </div>
  <div class="layout__row">
    <div class="layout__cell layout__cell--last">
      Row 2 fills remaining vertical space.
    </div>
  </div>
</div>