在沒有javascript的情況下使div填充瀏覽器窗口的剩余高度

Question

首先，我想向您展示布局，所以我認為我會嘗試實現：

第一個div位於頁面頂部，具有靜態高度。 第二個div必須將剩余的空間填充到底部。 如何在沒有javascript或jQuery的情況下實現這一目標？

Answer 1

您可以使用calc()函數執行此操作。

 html, body { height: 100%; margin: 0; } #top { background: #00A743; height: 100px; } #bottom { background: #40008B; height: calc(100% - 100px); } 

 <div id="top"></div> <div id="bottom"></div> 

Answer 2

兼容所有瀏覽器

 * { margin: 0; padding: 0; box-sizing: border-box; } .head { height: 100px; top: 0; width: 100%; background: #00963F; position: absolute; border-width: 5px 5px 0 5px; border-style: solid; border-color: white; color: white; text-align: center; } .cont { position: absolute; top: 100px; width: 100%; bottom: 0px; background: #27338B; border-width: 5px; border-style: solid; border-color: white; color: white; text-align: center; } 

 <div class="head">Fixed height</div> <div class="cont">Rest of the browser height</div> 

Answer 3

你可以做到這一點。

#div1 
{
    position:absolute;
    display: block;
    height: 200px;
    width: 100%;
    top: 0px;
    background-color: #900;
}

#div2
{
    position:absolute;
    display: block;
    height: 200px;
    width: 100%;
    top: 200px;
    background-color: #090;
}