html - CSS:有没有办法让元素填满页面？

Question

如果我有下面的代码，如何让第二个div占据页面的其余部分？:

<div style="height:300px;">
  blah
</div>

<div style="?">

</div>

例如，如果用户的浏览器窗口的高度是 1000px，那么如何使第二个 div 为 700px？

Answer 1

这是您可以采用的方法:

1. 做第一个<div>第二个 child <div>
2. 给外<div>一些填充等于内部 <div> 的高度
3. 使用position: absolute;得到内部<div>捕捉到页面顶部

现在外面<div>将充当底部<div> .

例子:

<style type="text/css">
    div#outer
    {
        padding-top: 300px;
    }

    div#inner
    {
        position: absolute;
        top: 0;
        background: yellow;
        display: block;
        height: 300px;
        width: 100%;
    }
</style>

<div id="outer">
    <div id="inner">
        top content
    </div>

    bottom content
</div>

http://jsfiddle.net/Eq8Jq/1/