Question

如何创建一个在顶部和下面有一个固定高度div的布局，它总是占据页面高度和宽度的其余部分。因此，如果调整窗口大小，则第二个div的高度和宽度会相应调整大小。

我希望实现的一个例子类似于http://omegle.com/

到目前为止，我提出了这个问题：

<html>
<head>
<body style="width:100%;height:100%;position:absolute;background:#EEE;margin:0 auto">
<div style="border-bottom:1px solid #000;height:50px;background:#900">1st div</div>
<div style="height:100%;width:100%;background:#090">2nd div</div>
</body>
</html>

这给了我顶部的固定div，以及底部的可调整大小的div，但是第二个div不考虑固定div的高度，所以div的高度比我想要的高。如果我将div 2的高度％缩小到80％，那么它将适合，但是由于上面固定的高度块，在调整窗口大小时它不会保持不变。

我正在寻找一个免费的JavaScript解决方案。

Answer 1

为什么不给身体提供内容背景颜色？

请参阅demo fiddle。

CSS：

html,
body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    background: #090;
}
#header {
    border-bottom: 1px solid #000;
    height: 50px;
    background: #900;
}

当您需要将内容真正延伸到窗口底部时，请将其放置在绝对位置，例如this fiddle：

CSS：

#content {
    position: absolute;
    top: 51px;
    bottom: 0;
    background: #090;
}

固定顶部高度和动态宽度和高度

1 个答案: