如何讓 div 填充剩余空間？

Question

假設我有這個基本的 html 布局：

• 標題

• 自動調整大小的 DIV

• 頁腳。

頁眉和頁腳具有固定的像素大小。

<div id="header">
Lorem Ipsum
</div>

<div id="auto">
This div should automatically change size
</div>

</div id="footer">
Lorem Ipsum
</div>

和 CSS

document,body {
width:100%;
height:100%;
}
#header {
width:100%;
height:50px;
}
#auto {
height:100% (it fills 100% of the window height instead the remaining)
}
#footer {
width:100%;
height:50px;
}

如何讓 div 填充剩余空間？

Answer 1

有很多方法可以做到這一點，但我自己使用粘性頁腳。

CSS 技巧
粘性頁腳

我建議您創建一個容器div元素，其中包含header 、 main和footer並將其設置為width:100%; height:100% min-height:???; width:100%; height:100% min-height:???;

Answer 2

您可以通過使用 jQuery 獲取窗口高度並獲取窗口高度的頁眉和頁腳的高度並將其設置在您的 div 上來修復它。

像這樣：

header {
    background: red;
    height: 10px;
    position: fixed;
    top: 0;
    width:100%;
}

.resizable {
    background: blue;
    width: 100%;
}

footer {
    background: red;
    bottom: 0;    
    height: 10px;
    position: fixed;
    width:100%;
}

這是 jQuery：

$(document).ready(function(){

    var newHeight = $(window).height() - 20;

    $(".resizable").css("height", newHeight);

});

工作 JSFiddle