如何使用CSS修复Div到页面顶部
我正在写一个词汇表页面。 我有页面顶部的字母链接。 我想保持页面的顶部（包括字母表链接）固定，而页面的部分与定义，点击字母上下滚动。
我的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> [编辑]
我试图创造的效果类似于这里的效果 。 不同的是，在链接的例子中，页面滚动是在用户点击一个类别时完成的。 在我的情况下，当页面顶部的索引（即字母表）被点击时，我想滚动页面。
是的，有很多方法可以做到这一点。 “最快”的方法是将CSS添加到类似于以下的div
#term-defs { height: 300px; overflow: scroll; }
这将迫使div滚动，但这可能不会得到最好的效果。 另一条路线是绝对的把物品的位置固定在顶部，你可以通过做这样的事情来玩这个。
#top { position: fixed; top: 0; left: 0; z-index: 999; width: 100%; height: 23px; }
这将解决它的顶部，其他内容的高度为23px。
最终的实施将取决于你真正想要的效果。
你可以做这样的事情：
<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>
这是一个位置：固定这是最重要的，因为它需要正常页面stream的顶部div，并将其固定在预先确定的位置。 使用padding-top：1em也是很重要的，否则term-defs div会从最上面的div开始。 背景和宽度在那里覆盖了术语defs div的内容，因为它们在顶部div下滚动。
希望这可以帮助。
你可以简单地修改顶部的div：
#top { position: fixed; top: 20px; left: 20px; }
您也可以使用flexbox ，但是您必须添加一个覆盖div#top和div#term-defs的父div。 所以HTML看起来像这样：
<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>
CSS会是这样的：
#content { width: 100%; height: 100%; display: flex; flex-direction: column; } #term-defs { flex-grow: 1; overflow: auto; }
flex-grow确保div的大小等于剩余的大小。
你可以做同样没有flexbox，但是要计算#term-defs的高度会更复杂（你必须知道#top的高度，使用calc(100% - 999px)或者设置高度#term-defs直接）。
使用flexboxdynamic大小的div是可能的。
一个区别是滚动条只出现在term-defs div 。
