如何使用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#topdiv#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