如何使DIV填满浏览器窗口的剩余垂直空间？ [英] How to make a DIV fill the remaining vertical space of the browser window?

问题描述

我有这个简化的代码：

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

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

The div height ends up being 100% of the height of the browser window client space, which summed up with the height of the text line, is more than the window height, so you have to scroll.

如何制作div高度，使浏览器窗口的高度减去文字行？

How can I make the div height so it takes the height of the browser window minus the line of text?

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

Or, in other words, how can I make the div take all the free space vertically regarding what other DOM objects already occupy?

推荐答案

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

I met the same problem too. Here is the solution I found:

<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>

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

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

这篇关于如何使DIV填满浏览器窗口的剩余垂直空间？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！