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-Tricks
StickyFooter

我建议您创建一个包含div，header和main的容器footer元素，并将其设置为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);

});

Working JSFiddle

如何使div填充剩余空间？

2 个答案: