如何让 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