Div填充剩余高度

Question

我有兩個div ， bottom的一個具有擴展最高的內容。 頁面position absolute是100％高度/寬度position absolute

<style>
    body, html { height:100%, width:100% }
    .page { position: absolute; height: 100%; top: 0; right: 0; left: 0; bottom: 0}
    .bottom { position absolute; bottom: 0; right: 0; left: 0; }
    .top { position absolute; bottom: 0; right: 0; left: 0; }
</style>

我如何做到這一點，以便頂部div轉換底部div剩下的任何頁面，因此，如果window的高度為600 ，底部需要400 ，頂部需要200

Answer 1

如果要使用純CSS，是否有任何理由要使用頂級div？

檢查此JSFiddle演示

在此演示中，您可以看到沒有頂部div時，可以將div插入底部，而父div會填充剩余空間。

HTML：

<div class="page">
    this is top
    <div class="bottom">
        This is a text
        <br/>
        In order to expand the bottom
        <br />
        blah blah
        <br />
        blah blah blah
        <br />
        blah blah blah blah
    </div>
</div>

CSS：

body, html { height:100%, width:100% }
.page { position: absolute; height: 100%; top: 0; right: 0; left: 0; bottom: 0; background-color:green}
.bottom { position: absolute; bottom: 0; right: 0; left: 0; background-color:red}

更新：

但是，如果必須創建一個填充高度保持不變的top div，它認為沒有使用純CSS的跨瀏覽器解決方案，但是您可以使用簡單的JQuery代碼。

假設您有以下HTML：

<div class="page">
    <div class="top">
        this is top
    </div>
    <div class="bottom">
        This is a text
        <br/>
        In order to expand the bottom
        <br />
        blah blah
        <br />
        blah blah blah
        <br />
        blah blah blah blah
    </div>
</div>

所以使用這個JS：

function setHeight() {
    $(".top").height($(".page").height() - $(".bottom").height());
}

$(document).ready(setHeight);
$(window).resize(setHeight);

查看JSFiddle演示