blocks|key|258299|text|是的，有很多方法可以做到这一点。“最快”的方法是将CSS添加到div中，如下所示|type|unstyled|depth|inlineStyleRanges|entityRanges|data|258300|#term-defs+{
++++height:+300px;
++++overflow:+scroll;
}|code-block|syntax|javascript|258301|这将强制div是可滚动的，但这可能不会获得最佳效果。另一种方法是绝对固定顶部项目的位置，你可以这样做。|258302|#top+{
++++position:+fixed;
++++top:+0;
++++left:+0;
++++z-index:+999;
++++width:+100%25;
++++height:+23px;
}|258303|这将把它固定在顶部，在其他高度为23px的内容之上。|258304|最终的实现将取决于您真正想要的效果。|258305|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>Yes, there are a number of ways that you can do this.  The &quot;fastest&quot; way would be to add CSS to the div similar to the following</p>
<pre class="lang-css prettyprint-override"><code>#term-defs {
    height: 300px;
    overflow: scroll;
}
</code></pre>
<p>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.</p>
<pre class="lang-css prettyprint-override"><code>#top {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    height: 23px;
}
</code></pre>
<p>This will fix it to the top, on top of other content with a height of 23px.</p>
<p>The final implementation will depend on what effect you really want.</p>


blocks|key|2950426|text|你可以简单的固定顶部的div：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2950427|#top+{+position:+fixed;+top:+20px;+left:+20px;+}|code-block|syntax|javascript|2950428|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>You can simply make the top div fixed:</p>

<pre><code>#top { position: fixed; top: 20px; left: 20px; }
</code></pre>


blocks|key|258335|text|你可以这样做：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|258336|<html>
<head><title>My+Glossary</title></head>
<body+style="margin:0px;">
++++++++<div+id="top"+style="position:fixed;background:white;width:100%25;">
++++++++++++<a+href="#A">A</a>+%7C
+++++++++++++<a+href="#B">B</a>+%7C
++++++++++++<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>|code-block|syntax|javascript|258337|最重要的是position:fixed，因为它从正常页面流中取出顶部div，并将其固定在预定位置。使用padding-top:1em也很重要，因为否则术语-defs+div就会在top+div下面开始。background和width用于覆盖term-defs+div的内容，因为它们滚动到顶部div下。|offset|length|style|BOLD|258338|希望这能有所帮助。|258339|entityMap^0|0|0|5|E|1F|F|2T|A|34|5|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@$I|T|J|U|K|L]|$I|V|J|W|K|L]|$I|X|J|Y|K|L]|$I|Z|J|10|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|11|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|P|$]]

<p>You can do something like this:</p>

<pre><code>&lt;html&gt;
&lt;head&gt;&lt;title&gt;My Glossary&lt;/title&gt;&lt;/head&gt;
&lt;body style="margin:0px;"&gt;
        &lt;div id="top" style="position:fixed;background:white;width:100%;"&gt;
            &lt;a href="#A"&gt;A&lt;/a&gt; |
             &lt;a href="#B"&gt;B&lt;/a&gt; |
            &lt;a href="#Z"&gt;Z&lt;/a&gt;
        &lt;/div&gt;

        &lt;div id="term-defs" style="padding-top:1em;"&gt;
           &lt;dl&gt;
               &lt;span id="A"&gt;&lt;/span&gt;
               &lt;dt&gt;foo&lt;/dt&gt;
               &lt;dd&gt;This is the sound made by a fool&lt;/dd&gt;
               &lt;!-- and so on ... -&gt;
           &lt;/dl&gt;
        &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>It's the <strong>position:fixed</strong> that'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 <strong>padding-top:1em</strong> because otherwise the term-defs div would start right under the top div. The <strong>background</strong> and <strong>width</strong> are there to cover the contents of the term-defs div as they scroll under the top div.</p>

<p>Hope this helps.</p>


blocks|key|260524|text|您也可以使用flexbox，但您必须添加一个涵盖div#top和div#term-defs的父。因此，超文本标记语言如下所示：|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|CODE|entityRanges|data|260525|​|260526|++++#content+{
++++++++width:+100%25;
++++++++height:+100%25;
++++++++display:+flex;
++++++++flex-direction:+column;
++++}

++++#term-defs+{
++++++++flex-grow:+1;
++++++++overflow:+auto;
++++}+|code-block|syntax|javascript|260527|++++<body>
++++++++<div+id="content">
++++++++++++<div+id="top">
++++++++++++++++<a+href="#A">A</a>+%7C
++++++++++++++++<a+href="#B">B</a>+%7C
++++++++++++++++<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>
++++++++++++++++++++
++++++++++++++++</dl>
++++++++++++</div>
++++++++</div>
++++</body>|260528|260529|flex-grow确保div的大小等于剩余的大小。|260530|你可以用flexbox做同样的事情，但是计算#term-defs的高度会更复杂(你必须知道#top的高度并使用calc(100%25+-+999px)或者直接设置#term-defs的高度)。|260531|有了flexbox，div的动态大小是可能的。|260532|一个不同之处在于，滚动条只出现在term-defs+div上。|260533|entityMap^0|6|15|1F|7|O|7|W|D|0|0|0|0|0|0|9|0|M|A|19|4|1J|I|27|A|0|0|G|D|0^^$0|@$1|2|3|4|5|6|7|10|8|@$9|11|A|12|B|C]|$9|13|A|14|B|C]|$9|15|A|16|B|D]|$9|17|A|18|B|D]]|E|@]|F|$]]|$1|G|3|H|5|6|7|19|8|@]|E|@]|F|$]]|$1|I|3|J|5|K|7|1A|8|@]|E|@]|F|$L|M]]|$1|N|3|O|5|K|7|1B|8|@]|E|@]|F|$L|M]]|$1|P|3|H|5|6|7|1C|8|@]|E|@]|F|$]]|$1|Q|3|R|5|6|7|1D|8|@$9|1E|A|1F|B|D]]|E|@]|F|$]]|$1|S|3|T|5|6|7|1G|8|@$9|1H|A|1I|B|D]|$9|1J|A|1K|B|D]|$9|1L|A|1M|B|D]|$9|1N|A|1O|B|D]]|E|@]|F|$]]|$1|U|3|V|5|6|7|1P|8|@]|E|@]|F|$]]|$1|W|3|X|5|6|7|1Q|8|@$9|1R|A|1S|B|D]]|E|@]|F|$]]|$1|Y|3|-4|5|6|7|1T|8|@]|E|@]|F|$]]]|Z|$]]

<p>You can also use <strong>flexbox</strong>, but you'd have to add a parent div that covers <code>div#top</code> and <code>div#term-defs</code>. So the <strong>HTML</strong> looks like this:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>    #content {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    #term-defs {
        flex-grow: 1;
        overflow: auto;
    } </code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;body&gt;
        &lt;div id="content"&gt;
            &lt;div id="top"&gt;
                &lt;a href="#A"&gt;A&lt;/a&gt; |
                &lt;a href="#B"&gt;B&lt;/a&gt; |
                &lt;a href="#Z"&gt;Z&lt;/a&gt;
            &lt;/div&gt;
    
            &lt;div id="term-defs"&gt;
                &lt;dl&gt;
                    &lt;span id="A"&gt;&lt;/span&gt;
                    &lt;dt&gt;foo&lt;/dt&gt;
                    &lt;dd&gt;This is the sound made by a fool&lt;/dd&gt;
                    &lt;!-- and so on ... --&gt;
                &lt;/dl&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/body&gt;</code></pre>
</div>
</div>
</p>

<p><code>flex-grow</code> ensures that the div's size is equal to the remaining size.</p>

<p>You could do the same without flexbox, but it would be more complicated to work out the height of <code>#term-defs</code> (you'd have to know the height of <code>#top</code> and use <code>calc(100% - 999px)</code> or set the height of <code>#term-defs</code> directly).<br>
With flexbox dynamic sizes of the divs are possible.</p>

<p>One difference is that the scrollbar only appears on the <code>term-defs div</code>. </p>


<p>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.</p>

<p>My HTML looks a bit like this:</p>

<pre><code>&lt;html&gt;
&lt;head&gt;&lt;title&gt;My Glossary&lt;/title&gt;&lt;/head&gt;
&lt;body&gt;
        &lt;div id="top"&gt;
            &lt;a href="#A"&gt;A&lt;/a&gt; |
             &lt;a href="#B"&gt;B&lt;/a&gt; |
            &lt;a href="#Z"&gt;Z&lt;/a&gt;
        &lt;/div&gt;

        &lt;div id="term-defs"&gt;
           &lt;dl&gt;
               &lt;span id="A"&gt;&lt;/span&gt;
               &lt;dt&gt;foo&lt;/dt&gt;
               &lt;dd&gt;This is the sound made by a fool&lt;/dd&gt;
               &lt;!-- and so on ... --&gt;
           &lt;/dl&gt;
        &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p><strong>[Edit]</strong></p>

<p>The kind of effect I am trying to create is similar to the one <a href="http://www.1stwebdesigner.com/wp-content/uploads/2010/07/index.html" rel="noreferrer">here</a>. 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.</p>


How to fix a Div to top of page with CSS only

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我正在写一个词汇表页面。我在页面顶部有字母表链接。我想保持页面顶部(包括字母表链接)的固定，而与定义的页面部分，滚动向上/向下作为一个字母表被点击。我的HTML看起来有点像这样：<html><head><title>My Glossary</title></head><body>        <div id="top...

问如何仅使用CSS将Div固定到页面顶部
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何仅使用CSS将Div固定到页面顶部EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何仅使用CSS将Div固定到页面顶部
EN