如何使用CSS放置固定高度可变的标题和可滚动的内容框？

一尘不染

如何使用CSS放置固定高度可变的标题和可滚动的内容框？

css

我正在尝试制作一个带有固定标题和可滚动内容区域的网页。当集管具有已知高度时，这是微不足道的，但是我正在努力寻找集管处于流动状态的解决方案。

我想要的布局是：

--------------
head
--------------
content
--------------

其中“头”是其内容所需的高度，“内容”没有最小高度，但在变为可滚动状态之前将达到视口底部的最大高度。

这些天来使用纯CSS可能吗？我的目标是IE8 +。

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">

body {
    margin: 0;
}

#head {
    background: yellow;
    height: 20px; /* I can't rely on knowing this. */
}

#content {
    background: red;
    position: absolute;
    top: 20px; /* here also */
    bottom: 0;
    width: 100%;
    overflow: auto;
}

        </style>
    </head>
    <body>
        <div id="head">some variable height content</div>
        <div id="content">
            scrollable content<br/>
            scrollable content<br/>
            scrollable content<br/>
            scrollable content<br/>
            scrollable content<br/>
            scrollable content<br/>
            scrollable content<br/>
            scrollable content<br/>
            scrollable content<br/>
            scrollable content<br/>
            scrollable content<br/>
            scrollable content<br/>
            scrollable content<br/>
            scrollable content<br/>
            scrollable content<br/>
        </div>
    </body>
</html>

阅读 327

2020-05-16

共1个答案

一尘不染

假设您position:fixed所说的“固定” ，我认为在纯CSS中是不可能的，因为position:fixed该元素会脱离文档流。

但是，只需花一两行JavaScript即可获得所需的内容。这样的事情（未经测试，仅出于示例目的，将需要调整语法以使其实际工作）：

var height = document.getElementById("head").offsetHeight;
document.getElementById("content").style.marginTop = height + 'px';

诸如此类的东西可以使您获得固定的渲染高度，<div>并相应地设置内容<div>的边距。您还需要在固定对象上显式设置背景色<div>，否则滚动时内容似乎会渗入固定对象。

2020-05-16