如何使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