如何修复一个分区到顶部的网页与CSS只

wa7juj8i 于 2023-04-13 发布在其他

关注(0)|答案(5)|浏览(185)

我正在写一个词汇表页面。我在页面的顶部有字母表链接。我想保持页面的顶部（包括字母表链接）固定，而页面的定义部分，随着字母表的点击而上下滚动。
我的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>

[编辑]

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

css

来源：https://stackoverflow.com/questions/6786511/how-to-fix-a-div-to-top-of-page-with-css-only

5条答案

按热度按时间

wvmv3b1j1#

是的，有很多方法可以做到这一点。

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

这将强制div可滚动，但这可能不会获得最佳效果。另一种方法是绝对固定顶部项目的位置，您可以通过这样做来玩这个游戏。

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

这将把它固定在顶部，在其他内容的顶部，高度为23px。
最终的实现将取决于您真正想要的效果。

赞(0）回复(0）举报 2023-04-13

sqyvllje2#

你可以这样做：

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

最重要的是position：fixed，因为它从正常页面流中获取顶部div并将其固定在预定义的位置。使用padding-top：1 em也很重要，因为否则term-defs div将从顶部div的正下方开始。background和width是为了在滚动到顶部div下方时覆盖term-defs div的内容。
希望这能帮上忙。

赞(0）回复(0）举报 2023-04-13

9gm1akwq3#

您可以简单地将顶部div固定：

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

赞(0）回复(0）举报 2023-04-13

kse8i1jr4#

你也可以使用flexbox，但你必须添加一个父div，覆盖div#top和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-grow确保div的大小等于剩余的大小。
你也可以在没有flexbox的情况下做同样的事情，但是计算#term-defs的高度会更复杂（你必须知道#top的高度，然后使用calc(100% - 999px)或者直接设置#term-defs的高度）。
使用flexbox可以动态调整div的大小。
一个区别是滚动条只出现在term-defs div上。

赞(0）回复(0）举报 2023-04-13

oug3syen5#

固定div与同级不重叠的解决方案

如果你希望你的div是固定的，但又不想和兄弟div重叠，可以使用position: sticky和top: 0px作为固定的头部。这样，div将是固定的，并且从父div获取高度，这样兄弟div就不会和固定的div重叠。

.parent {
  height: 50vh;
  overflow: auto;
  background: yellow;
}

.fixed {
  position: sticky;
  top: 0px;
  background: pink;
}

.content {
  height: 150vh;
}

<div class="parent">
     <div class="fixed">
        Fixed Header
     </div>
     <div class="content">
        <p>content</p>
     </div>
</div>

赞(0）回复(0）举报 2023-04-13

我来回答

如何修复一个分区到顶部的网页与CSS只

5条答案

固定div与同级不重叠的解决方案

相关问题

热门标签

最新问答