框架集的纯 CSS 模拟

发布于 2024-09-13 04:44:22 字数 306 浏览 7 评论 0原文

我已经搜索了1个多小时没有成功。有没有一种纯 CSS 的方式来模拟框架集？我的意思是，真的模仿它。我发现了一些有趣的东西，您将有固定的顶部和底部块，但内容的滚动条是常规的浏览器主体滚动条。我需要的是一个仅用于内容块的滚动条，就像框架集所做的那样。

我可以通过将 Overflow: auto 分配给我的内容区域 div 并设置固定高度来使其工作。但问题是我不知道客户端浏览器窗口大小而不使用 javascript。我不想为此使用 javascript。我也不能使用百分比来表示高度，因为我的顶部块具有固定的高度。下面的块应该根据浏览器窗口的高度扩展或缩小。任何帮助表示赞赏。谢谢你！

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

疑心病 2024-09-20 04:44:23

像这样的事情怎么样？

HTML

<div id="header">
    <img src="logo.gif" alt="logo" />
    <h1 class="tagline">Oh em gee</h1>
</div>
<div id="content">
    <div id="content-offset">
        <p>This will be 100% of the screen height, BUT the content offset will have a top pixel margin which allows for your header. Set this to the pixel value of your header height.</p>
    </div>
</div>

CSS

body, html {
    margin: 0; padding: 0;
    height: 100%;
}
#header {
   height: 120px;
   position: fixed;
   top: 0;
   background: red;
   width: 100%;
}

#content {
    height: 100%;
    position: absolute;
    top: 0;
}
#content-offset {
    margin-top: 120px;
    background: aqua;
    height: 100%;
    width: 100%;
    position: fixed;
    overflow: auto;
}

How about something like this?

HTML

<div id="header">
    <img src="logo.gif" alt="logo" />
    <h1 class="tagline">Oh em gee</h1>
</div>
<div id="content">
    <div id="content-offset">
        <p>This will be 100% of the screen height, BUT the content offset will have a top pixel margin which allows for your header. Set this to the pixel value of your header height.</p>
    </div>
</div>

CSS

body, html {
    margin: 0; padding: 0;
    height: 100%;
}
#header {
   height: 120px;
   position: fixed;
   top: 0;
   background: red;
   width: 100%;
}

#content {
    height: 100%;
    position: absolute;
    top: 0;
}
#content-offset {
    margin-top: 120px;
    background: aqua;
    height: 100%;
    width: 100%;
    position: fixed;
    overflow: auto;
}

回复收藏 0 原文

￡噩梦荏苒 2024-09-20 04:44:23

Makro 的答案很接近，但效果不佳。内容与标题重叠。

就这一点而言，您希望将 position:fixed; 用于标题，而不是内容。这也使得包装器变得多余。这是一个基本的启动示例，您可以复制“粘贴”然后运行它。

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>SO question 3433129</title>
        <style>
            body { 
                margin: 0;
                background: aqua;
            }
            #header {
                position: fixed;
                height: 120px;
                width: 100%;
                background: pink;
            }
            #content {
                padding-top: 120px; /* Should be the same as #header height */
            }
        </style>
    </head>
    <body>
        <div id="header">
            <h1>Header</h1>
        </div>
        <div id="content">
            <p>Start of content.</p>
            <p><br><br><br><br><br><br><br><br><br><br><br><br><br><br></p>
            <p><br><br><br><br><br><br><br><br><br><br><br><br><br><br></p>
            <p><br><br><br><br><br><br><br><br><br><br><br><br><br><br></p>
            <p>End of content.</p>
        </div>
    </body>
</html>

The answer of Makro is close, but doesn't work well. The content overlaps the header.

To the point, you'd like to use position: fixed; for your header, not for your content. This also makes the wrapper superfluous. Here's a basic kickoff example, you can copy'n'paste'n'run it.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>SO question 3433129</title>
        <style>
            body { 
                margin: 0;
                background: aqua;
            }
            #header {
                position: fixed;
                height: 120px;
                width: 100%;
                background: pink;
            }
            #content {
                padding-top: 120px; /* Should be the same as #header height */
            }
        </style>
    </head>
    <body>
        <div id="header">
            <h1>Header</h1>
        </div>
        <div id="content">
            <p>Start of content.</p>
            <p><br><br><br><br><br><br><br><br><br><br><br><br><br><br></p>
            <p><br><br><br><br><br><br><br><br><br><br><br><br><br><br></p>
            <p><br><br><br><br><br><br><br><br><br><br><br><br><br><br></p>
            <p>End of content.</p>
        </div>
    </body>
</html>

回复收藏 0 原文