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

Question

I am writing a glossary page.我正在写一个词汇表页面。 I have the alphabet links on the top of the page.我在页面顶部有字母链接。 I want to keep the top of the page (including the alphabet links) fixed, whilst the section of the page with the definitions, scrolls up/down as an alphabet is clicked.我想保持页面顶部（包括字母链接）固定，而带有定义的页面部分在单击字母时向上/向下滚动。

My HTML looks a bit like this:我的 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>

[Edit] [编辑]

The kind of effect I am trying to create is similar to the one here .我试图创造的那种效果与这里的类似。 The difference being that in the example in the link, the page scrolling is done when a user clicks on a category.不同之处在于，在链接中的示例中，页面滚动是在用户单击类别时完成的。 In my case, I want to scroll the page when an index (ie an alphabet) at the top of the page, is clicked.就我而言，我想在单击页面顶部的索引（即字母表）时滚动页面。

Answer 1

Yes, there are a number of ways that you can do this.是的，有很多方法可以做到这一点。 The "fastest" way would be to add CSS to the div similar to the following “最快”的方法是将 CSS 添加到类似于以下的 div

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

This will force the div to be scrollable, but this might not get the best effect.这将强制 div 可滚动，但这可能无法获得最佳效果。 Another route would be to absolute fix the position of the items at the top, you can play with this by doing something like this.另一种方法是绝对修复顶部项目的 position，您可以通过这样做来玩这个。

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

This will fix it to the top, on top of other content with a height of 23px.这会将其固定在顶部，在其他高度为 23px 的内容之上。

The final implementation will depend on what effect you really want.最终的实现将取决于您真正想要的效果。

Answer 2

You can do something like this:你可以这样做：

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

It's the position:fixed that's most important, because it takes the top div from the normal page flow and fixes it at it's pre-determined position.最重要的是position:fixed ，因为它从正常页面流中获取顶部 div 并将其修复为预先确定的 position。 It's also important to use the padding-top:1em because otherwise the term-defs div would start right under the top div.使用padding-top:1em也很重要，否则 term-defs div 将在顶部 div 下方开始。 The background and width are there to cover the contents of the term-defs div as they scroll under the top div.背景和宽度用于覆盖 term-defs div 的内容，因为它们在顶部 div 下滚动。

Hope this helps.希望这可以帮助。

Answer 3

You can simply make the top div fixed:您可以简单地固定顶部 div：

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

Answer 4

You can also use flexbox , but you'd have to add a parent div that covers div#top and div#term-defs .您也可以使用flexbox ，但您必须添加一个包含div#top和div#term-defs的父 div。 So the HTML looks like this:所以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 ensures that the div's size is equal to the remaining size. flex-grow确保 div 的大小等于剩余的大小。

You could do the same without flexbox, but it would be more complicated to work out the height of #term-defs (you'd have to know the height of #top and use calc(100% - 999px) or set the height of #term-defs directly).你可以在没有 flexbox 的情况下做同样的事情，但是计算#term-defs的高度会更复杂（你必须知道#top的高度并使用calc(100% - 999px)或设置高度#term-defs直接）。
With flexbox dynamic sizes of the divs are possible.使用 flexbox 可以实现 div 的动态大小。

One difference is that the scrollbar only appears on the term-defs div .一个区别是滚动条只出现在term-defs div上。

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

问题描述

4 个解决方案

解决方案1
90 2011-07-22 06:42:51

解决方案2
18 2011-07-22 06:53:22

解决方案3
6 2011-07-22 06:43:38

解决方案4
3 2016-02-26 09:08:38

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

问题描述

4 个解决方案

解决方案1 90 2011-07-22 06:42:51

解决方案2 18 2011-07-22 06:53:22

解决方案3 6 2011-07-22 06:43:38

解决方案4 3 2016-02-26 09:08:38

解决方案1
90 2011-07-22 06:42:51

解决方案2
18 2011-07-22 06:53:22

解决方案3
6 2011-07-22 06:43:38

解决方案4
3 2016-02-26 09:08:38