Html 如何仅使用 CSS 将 Div 修复到页面顶部
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6786511/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to fix a Div to top of page with CSS only
提问by oompahloompah
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 (i.e. an alphabet) at the top of the page, is clicked.
我试图创造的那种效果与这里的类似。不同之处在于，在链接中的示例中，页面滚动是在用户单击类别时完成的。就我而言，我想在单击页面顶部的索引（即字母表）时滚动页面。
回答by Mitchel Sellers
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. 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.
这将强制 div 可滚动，但这可能无法获得最佳效果。另一种方法是绝对固定顶部项目的位置，您可以通过执行以下操作来使用它。
#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.
最终的实现将取决于您真正想要的效果。
回答by fsaftoiu
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:fixedthat's most important, because it takes the top div from the normal page flow and fixes it at it's pre-determined position. It's also important to use the padding-top:1embecause otherwise the term-defs div would start right under the top div. The backgroundand widthare there to cover the contents of the term-defs div as they scroll under the top div.
最重要的是position:fixed，因为它从正常页面流中获取顶部 div 并将其固定在它的预定位置。使用padding-top:1em也很重要，否则 term-defs div 将在顶部 div 下开始。的背景和宽度在那里覆盖术语-DEFS div的内容，因为它们的顶部的div下滚动。
Hope this helps.
希望这可以帮助。
回答by Sascha Goebel
You can simply make the top div fixed:
您可以简单地使顶部 div 固定：
#top { position: fixed; top: 20px; left: 20px; }
回答by Domysee
You can also use flexbox, but you'd have to add a parent div that covers div#topand div#term-defs. So the HTMLlooks like this:
您也可以使用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-growensures 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 #topand use calc(100% - 999px)or set the height of #term-defsdirectly).
With flexbox dynamic sizes of the divs are possible.
你可以在没有 flexbox 的情况下做同样的事情，但是计算出的高度会更复杂#term-defs（你必须知道的高度#top和使用calc(100% - 999px)或#term-defs直接设置的高度）。
使用 flexbox 动态大小的 div 是可能的。
One difference is that the scrollbar only appears on the term-defs div.
一个区别是滚动条只出现在term-defs div.
