如何使用CSS来定位一个固定的可变高度标题和一个可滚动的内容框?

前端之家收集整理的这篇文章主要介绍了如何使用CSS来定位一个固定的可变高度标题和一个可滚动的内容框?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我试图做一个固定标题和可滚动内容区域的网页。这是微不足道的,当标题具有已知的高度,但我正在努力找到一个解决方案,当标题是流动的。

我想要的布局是:

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

其中“head”是其内容需要的高度,“content”没有最小高度,但在可滚动之前将达到视口底部的最大高度。

这是可能的这些天在纯CSS吗?我的目标是IE8。

为了澄清我想要的,here is what I would do if I knew the height of the header

<!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>

解决方法

假设“固定”你的意思是位置:固定,我不认为它可能在纯CSS,因为position:fixed从文档流中取出元素。

但是,它应该只需要一两行JavaScript来得到你想要的。这样的东西(未经测试,仅为了示例的目的,将需要语法调整实际工作):

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

这样的东西应该会让你渲染的固定< div>并相应地设置内容< div>的margin。您还需要在固定的< div>上显式设置背景颜色,否则滚动时内容显示为固定的。

原文链接:https://www.f2er.com/css/221602.html

猜你在找的CSS相关文章