如何仅使用CSS将Div固定到页面顶部

Question 1

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

我的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>

[编辑]

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

Question 2

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

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

这将迫使div可滚动，但这可能无法获得最佳效果。另一种方法是绝对固定项目在顶部的位置，您可以通过执行以下操作来解决此问题。

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

这样会将其固定在其他内容顶部，高度为23px。

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

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

最重要的是位置：固定，因为它从常规页面流中获取顶部div并将其固定在其预定位置。使用padding-top：1em也很重要，因为否则，术语-defs div将从top div开始。当它们在顶部div下方滚动时，背景和宽度将覆盖term-defs div的内容。

希望这可以帮助。

Question 4

您可以简单地固定最上面的div：

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

Question 5

您也可以使用flexbox，但是您必须添加一个包含div#top和的父div div#term-defs。因此，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)或设置其高度#term-defs）会更加复杂。
使用flexbox时，div的动态大小是可能的。

区别在于滚动条仅出现在上term-defs div。