Question

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

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

<div style="?">

</div>

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

Answer 1

这是您可以采取的方法：

让第一个<div>成为第二个<div>
给外<div>一些填充等于内<div>的高度
使用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/

Answer 2

您可以在div2 style = "height: 100%"上使用。但是，这仅在容器也指定了高度时才有效。如果这只是在您的主体中，那么也设置body { height: 100%; }

Answer 3

如mrtsherman所述，第二个div的关键是style =“height：100％”。

<div style="height:300px;background-color:yellow">
    blah
</div>

<div style="clear:both;height:100%;background-color:red;">
    Second div
</div>

第二个div将在页面的其余部分显示红色BG。

如果这不是您想要的，请告诉我们。

Answer 4

如果绝对定位不是问题，你可以这样做：

<div style="position: absolute; top: 0; left: 0; right: 0; height:300px; background-color:yellow;">
    Foo
</div>

<div style="position: absolute; top: 300px; left: 0; right: 0; bottom: 0; background-color: red;">
    Bar
</div>

CSS：有没有办法让元素填满页面？

4 个答案: