如何修复一个只有 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>

[编辑]

我试图创建的效果类似于 给你。不同之处在于，在链接中的示例中，页面滚动是在用户单击某个类别时完成的。在我的示例中，当单击页面顶部的索引(即字母表)时，我希望滚动页面。

314948 次浏览
小开

是的，有很多方法可以做到这一点。“最快”的方法是向 div 添加类似于下面这样的 CSS

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

这将强制 div 可滚动，但这可能不会得到最好的效果。另一种方法是绝对确定物品在顶部的位置，你可以这样做。

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

这将把它固定在顶部，在其他高度为23px 的内容之上。

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

小开

您可以简单地修复顶部 div:

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

你可以这样做:

<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，并将其固定在预先确定的位置。使用 填充顶部: 1em也很重要，因为否则术语-defs div 将从顶部 div 的正下方开始。背景和 宽度用于在顶部 div 下滚动时覆盖术语-defs div 的内容。

希望这个能帮上忙。

小开

您也可以使用 弹簧箱，但是您必须添加一个涵盖 div#top和 div#term-defs的父 div。所以 超文本标示语言看起来像这样:

    #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 的大小等于其余的大小。

你也可以在没有柔性箱的情况下做同样的事情，但是计算 #term-defs的高度会更加复杂(你必须知道 #top的高度并且使用 calc(100% - 999px)或者直接设置 #term-defs的高度)。
与柔性箱动态大小的 div 是可能的。

一个区别是滚动条只出现在 term-defs div上。


提交答案