如何仅使用 CSS 将 Div 修复到页面顶部答案

【问题标题】：How to fix a Div to top of page with CSS only如何仅使用 CSS 将 Div 修复到页面顶部
【发布时间】：2011-10-10 19:40:14
【问题描述】：

我正在写一个词汇表页面。我在页面顶部有字母链接。我想保持页面顶部（包括字母链接）固定，而带有定义的页面部分在单击字母时向上/向下滚动。

我的 HTML 看起来有点像这样：

<html>
<head><title>My Glossary</title></head>
<body>
        <div id="top">
            <a href="#A">A</a> |
             <a href="#B">B</a> |
            <a href="#Z">Z</a>
        </div>

        <div id="term-defs">
           <dl>
               <span id="A"></span>
               <dt>foo</dt>
               <dd>This is the sound made by a fool</dd>
               <!-- and so on ... -->
           </dl>
        </div>
</body>
</html>

[编辑]

我尝试创建的效果类似于here。不同之处在于链接中的示例中，页面滚动是在用户单击类别时完成的。就我而言，我想在点击页面顶部的索引（即字母）时滚动页面。

【问题讨论】：

标签： html css

【解决方案1】：

是的，您可以通过多种方式执行此操作。 “最快”的方法是将 CSS 添加到类似于以下的 div

#term-defs {
    height: 300px;
    overflow: scroll;
}

这将强制 div 可滚动，但这可能无法获得最佳效果。另一种方法是绝对固定顶部项目的位置，你可以通过这样做来玩这个。

#top {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    height: 23px;
}

这会将其固定在顶部，在其他高度为 23 像素的内容之上。

最终的实现将取决于你真正想要的效果。

【讨论】：

只是澄清一下，以防 OP 不知道，z-index 是这里的魔力。它将 div 提升到页面上其他项目的“上方”，让它们滚动到下方并“过去”。
@mitchel：感谢您的帮助。我试过了，但效果并不是我想要的。我已经编辑了我的问题，也许可以更清楚地解释我想要实现的那种效果 - 希望在仅 CSS 的解决方案中（也许不可能？）
@oompahloompah：实现您想要的行为的最佳方法是使用“Mitchel Sellers”的答案并实现顶部栏，如<link rel="import" href="/path/to/topbar.html">。另一种方法是在每个站点上添加一个“占位符”div，它应该具有与#top 元素相同的“高度”属性。两种变体都需要稍微适应您的 html 代码，因此不会知道纯 css 解决方案。

【解决方案2】：

您可以简单地将顶部 div 固定：

#top { position: fixed; top: 20px; left: 20px; }

【讨论】：

【解决方案3】：

你可以这样做：

<html>
<head><title>My Glossary</title></head>
<body style="margin:0px;">
        <div id="top" style="position:fixed;background:white;width:100%;">
            <a href="#A">A</a> |
             <a href="#B">B</a> |
            <a href="#Z">Z</a>
        </div>

        <div id="term-defs" style="padding-top:1em;">
           <dl>
               <span id="A"></span>
               <dt>foo</dt>
               <dd>This is the sound made by a fool</dd>
               <!-- and so on ... ->
           </dl>
        </div>
</body>
</html>

position:fixed 是最重要的，因为它从正常页面流中获取顶部 div 并将其固定在预定位置。使用 padding-top:1em 也很重要，否则 term-defs div 将在顶部 div 下方开始。 background 和 width 用于覆盖 term-defs div 的内容，因为它们在顶部 div 下滚动。

希望这会有所帮助。

【讨论】：

你如何决定 padding-top 是 1em 还是更多？
这实际上是您想要固定在顶部的项目的高度。在这种情况下，它是 1em，因为固定的
是一行文本。

【解决方案4】：

您也可以使用 flexbox，但您必须添加一个包含 div#top 和 div#term-defs 的父 div。所以 HTML 看起来像这样：

    #content {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    #term-defs {
        flex-grow: 1;
        overflow: auto;
    }

    <body>
        <div id="content">
            <div id="top">
                <a href="#A">A</a> |
                <a href="#B">B</a> |
                <a href="#Z">Z</a>
            </div>
    
            <div id="term-defs">
                <dl>
                    <span id="A"></span>
                    <dt>foo</dt>
                    <dd>This is the sound made by a fool</dd>
                    <!-- and so on ... -->
                </dl>
            </div>
        </div>
    </body>

flex-grow 确保 div 的大小等于剩余的大小。

你可以在没有 flexbox 的情况下做同样的事情，但是计算#term-defs 的高度会更复杂（你必须知道#top 的高度并使用calc(100% - 999px) 或设置@ 的高度987654329@直接）。
使用 flexbox 可以实现 div 的动态大小。

一个区别是滚动条只出现在term-defs div上。

【讨论】：