css - 在绝对大小的内容之间创建具有相对大小的 div

Question

我正在寻找一种方法来创建一个具有相对大小并根据浏览器的高度进行调整的 div。问题是我真的不知道从哪里开始，或者如何去做。

基本上我会有一个 header ，高度为 50 像素，下面是相对的 div。在该 div 下方，屏幕内有另一个必须为 50px 的 div(不滚动)。该 div 或另一个 div(我不介意哪个)的更多内容将在屏幕之外。

因此，如果浏览器的高度为 1000px，则顶部和底部的 div 将花费 100px。这意味着相对 div 的高度必须为 900px。

为了支持这个想法，我制作了一张我想要实现的简单图像:(是的，绘画技巧，我当前位置没有 Photoshop)

橙色边框代表整个页面的大小。

我知道使用 JavaScript 很容易做到这一点，这对我来说不是一个挑战，但如果可能的话，我正在努力寻找一个纯 CSS 的解决方案。有什么想法吗？

Answer 1

一个想法，使用 % 而不是 px 作为页眉和页脚:here

<div id='header'></div>
<div id='content'>
    <div id='scrollable'>this is my content</div>
</div>
<div id='footer'></div>

和CSS body { 高度:100%； } #header { 宽度:100%； 高度:15%； position:absolute； 顶部:0； 背景:红色； margin :0；

#footer {
    width:100%;
    height:15%;
    position:absolute;
    bottom:0;
    background:blue;

}

#content {
    position:absolute;
    width:100%;
    top:15%;
    height : 70%;
    background:yellow;
    overflow-y:auto;
}
#content #scrollable {
     min-height:100%;
}