css - 如何让一个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