如何使内容出现在固定的 DIV 元素下方？

Posted 2023-02-21

技术标签:

【中文标题】如何使内容出现在固定的 DIV 元素下方？【英文标题】：How can I make content appear beneath a fixed DIV element? 【发布时间】：2011-11-16 04:30:46 【问题描述】：

我的目的是在页面顶部创建一个菜单，即使用户滚动，该菜单也会保留在页面顶部（就像 Gmail 的最新功能一样，它具有随用户向下滚动的常用按钮，以便它允许无需滚动到页面顶部即可对消息执行操作）。

我还想将所述菜单下方的内容设置为显示在其下方-目前显示在其后面。

我的目标是这样的：

+________________________+
|          MENU          | <--- Fixed menu - stays at top even when scrolling.
+¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬+
|     CONTENT BEGINS     |
|          HERE          |
|                        |
|                        |
|                        |
|                        |
|                        |
|                        |
+¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬+   <--- Bottom of page.

我希望顶部的菜单永远不会移动并且保持在页面顶部，即使用户向下滚动也是如此。当用户位于页面顶部时，我还希望主要内容从菜单下方开始，但是当用户向下滚动时，菜单是否超出内容顶部并不重要。

总结：

我希望在页面顶部有一个固定位置的菜单，在滚动时跟随用户。只有当用户位于页面顶部时，内容才必须出现在菜单下方。当用户向下滚动时，菜单可能会与内容重叠。

有人可以解释一下如何实现吗？

谢谢。

更新：

CSS 代码：

#floatingMenu
clear: both;
position: fixed;
width: 85%;
background-color: #78AB46;
top: 5px;

html 代码：

<div id="floatingMenu">
    <a href="http://www.google.com">Test 1</a>
    <a href="http://www.google.com">Test 2</a>
    <a href="http://www.google.com">Test 3</a>
</div>

目前，我可以通过将菜单放在我的container div 中来使菜单显示在页面顶部并居中。但是，内容位于菜单后面。我设置了clear: both;，但这没有帮助。

【问题讨论】：

我能建议你看看这个，以便很好地实现你正在寻找的东西吗？ twitter.github.com/bootstrap 一般而言，也是良好 css 实践的良好开端。 2020 在这里，您现在可以使用 position: sticky; caniuse.com/#feat=css-sticky。如果你和我一样看到这个帖子 【参考方案1】：

用另一个 div 包装菜单内容：

<div id="floatingMenu">
    <div>
        <a href="http://www.google.com">Test 1</a>
        <a href="http://www.google.com">Test 2</a>
        <a href="http://www.google.com">Test 3</a>
    </div>
</div>

还有 CSS：

#floatingMenu 
    clear: both;
    position: fixed;
    width: 100%;
    height: 30px;
    background-color: #78AB46;
    top: 5px;


#floatingMenu > div 
    margin: auto;
    text-align: center;

关于菜单下方的页面，您也可以给它一个 padding-top：

#content 
    padding-top: 35px; /* top 5px plus height 30px */

【讨论】：

谢谢您，这太好了 - 在您发布您的答案之前我刚刚完成了这项工作，但感谢您的帮助。 @Mick，我在您更改后更新了答案。看看它是否适合你。【参考方案2】：

您需要的是一个额外的间距 div（据我了解您的问题）。

此 div 将放置在菜单和内容之间，并且与菜单 div 高度相同，包括内边距。

HTML

<div id="fixed-menu">
    Navigation options or whatever.
</div>
<div class="spacer">
    &nbsp;
</div>
<div id="content">
    Content.
</div>

CSS

#fixed-menu

    position: fixed;
    width: 100%;
    height: 75px;
    background-color: #f00;
    padding: 10px;


.spacer

    width: 100%;
    height: 95px;

看我的例子here。

这是通过抵消导航 div 所占用的空间来实现的，但由于它有 position: fixed;，它已从文档流中取出。

实现此效果的首选方法是在您的内容包装器上使用margin-top: 95px;/*your nav height*/。

【讨论】：

今天还有必要吗？一个额外的无用 div？不，您可以使用上边距将内容向下推送到固定菜单下。在响应式设计时代，我们仍然需要在固定大小的边距中破解，这真的很令人失望。如果没有 javascript，这仍然是不可能的。如果您的“位置：固定”标题具有可变高度（例如，当您缩小浏览器窗口的宽度并且标题选项换行时，它的高度会增加）......除了 JavaScript 之外，没有办法拥有这样的间隔 div或边距以与该可变高度同步的方式增加。 @Triynko，如果您对标题高度的更改是由媒体查询（屏幕宽度断点）驱动的，例如当您使用诸如材料设计之类的框架（例如 layout-sm="column"）或 twitter bootstrap (例如 col-md-6），您可以根据相同的断点简单地调整内容元素上的填充。这有意义吗？【参考方案3】：

我刚遇到这个问题，这是我的解决方案：

#floatingMenu + * 
    margin-top: 35px;

调整浮动菜单的高度。如果你不确定它是一个 div 跟随，那么你可以使用* 而不是div。这都是有效的 CSS2。

【讨论】：

好主意:)【参考方案4】：

你应该试试Pen，希望对你有帮助，甚至提供更多更好的功能来使用固定导航

1.clear:both;你不需要使用clear

【讨论】：

【参考方案5】：

我刚刚在导航下方的 div 中添加了一个 padding-top。希望能帮助到你。我是新来的。 C：

#nav 
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    background: url(../css/patterns/black_denim.png);
    z-index: 9999;


#container 
    display: block;
    padding: 6em 0 3em;

【讨论】：

不相关，但 z-index: 9999 可能没有帮助，并且会让你在使用引导程序、材料设计等框架时遇到真正的麻烦。一般来说，z-index 真的很容易迷失方向并且成为故障排除的真正痛苦。【参考方案6】：

如果您的菜单高度是可变的（为了响应性或因为它是动态加载的），您可以将上边距设置为固定 div 结束的位置。例如：

CSS

.fixed-header 
    width: 100%;
    margin: 0 auto;
    position: fixed;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    z-index: 999;

Javascript

$(document).ready(function() 
    var contentPlacement = $('#header').position().top + $('#header').height();
    $('#content').css('margin-top',contentPlacement);
);

HTML

...
<div id="header" class="fixed-header"></div>
<div id="content">...</div>
...

这里有一个小提琴 (https://jsfiddle.net/632k9xkv/5/)，它有一个固定的导航菜单和标题，希望使它成为一个有用的示例。

【讨论】：

我比凯尔的更喜欢这个答案，因为它解决了当你的标题改变高度时该怎么做的问题。在这种情况下，我觉得当您的布局框架（材料设计或引导程序等）遇到某个媒体断点时，您的标题通常会改变高度。如果是这种情况，您可以为匹配的媒体查询断点添加自己的 css 选择器，以将边距/填充调整为适合该屏幕尺寸的任何值。我认为这是一个很好的解决方案，因此您不需要以像素为单位指定高度，这使得这种方法非常适合各种不同设备（PC、笔记本电脑、平板电脑、移动）。完全同意，更好的方法。【参考方案7】：

对于那些建议使用 margin-top 或 padding-top 将主分区移动到固定菜单下方的人 - 你似乎没有完全测试它。

如果您设置了边距或内边距，它将随着页面滚动并且您会丢失行 - 请尝试this page

看起来不错，不是吗？突出显示底部可见行上的一个单词并按下 page-down - 带有突出显示的单词的行和其他几行将在固定分割下滚动。

Margin-top 或 padding-top 会将主分区定位在固定分区下方，但当您向下翻页或单击滚动条以滚动页面的一个视口高度时，它会全部平放在其正面。

如果您向上翻页，也会出现同样的问题，线条会从视口底部“脱落”。

有人对这个问题有实际的解决方法吗？

我知道如何定位 - 如果您了解有关边距、填充等的基础知识，这相当容易 - 但是如何防止滚动时丢失线条？

我查看了许多声称功能正常的页面的示例，这些页面在顶部具有固定的分区，但它们不起作用！他们都有滚动的问题。

我遇到过一些页面似乎可以工作，但如果将固定分区设置得更高，则会丢失行。我相信我知道它们为什么会起作用。

考虑完全正常（没有花哨的格式）页面上的文本如何滚动。当您向上滚动时，您看到底线还是看到下一行 - 底部已滚动到视口顶部？

答案 - 您会看到底线滚动成为顶线。

看似有效的固定菜单页面实际上并没有。滚动它们，底线将滚动出视口，但由于下一行是可见的，因此固定分割似乎有效 - 但我们知道得更好，不是吗？

如果固定分割高于一行文本的高度，则会失败并丢失行。

我见过的唯一能正常工作的页面是在 yahoo 等网站上，我没有时间也没有兴趣深入研究上面的大量 CSS、HTML 和 JavaScript了解问题的核心。

所以 - 转到该页面，看看您是否可以进行更改（“检查”元素并更改 CSS 规则）以解决滚动问题。

如果可以，请回来与全世界分享您的发现。

我的页面是一个很好的地方，可以查看如何将一个分区固定在顶部、居中（和主分区）并将其限制为最大宽度。它可能对你们中的一些人有所帮助，但很抱歉我没有解决滚动问题的方法

使用修复分区的高度 - 使其足够短，以便只显示一行，然后使用滚动播放。然后让它足够大，可以容纳两行，然后是三行，然后滚动播放。你会看到问题。

Here is a page 应该可以工作，但它没有 - 阅读最后一条评论 - 他们以不同的方式描述了问题，但这是同一个问题

我刚刚在 Chrome 中再次测试了该页面，它似乎运行得相当令人满意。对于FF，问题存在。还没试过IE。

那么 - FF 有什么不同？

Here's a page at cNet 适用于 chrome 和 ff - 那么他们在做什么呢？

使用 Chrome 进行的更多测试表明它在滚动时无法完全显示底线。当您滚动时，只有底部的部分行是可见的 - 所以，仍然需要修复。

【讨论】：

【参考方案8】：

刚刚为此苦苦挣扎并且不喜欢一些“黑客”解决方案，我发现这很有用且干净：

#floatingMenu
  position: sticky;
  top: 0;

【讨论】：

太棒了！不知道position: sticky！等一下，我的菜单有点粘，然后我滚动得越多，它就会滚出页面。需要进行更多实验。这是一个很好的解决方案，但目前并非所有浏览器都支持：caniuse.com/#feat=css-sticky :-( 小心粘性！如果您在标题中（通常）有很长的嵌套菜单，如果它们落在屏幕之外，这可能会使某些项目无法访问。不过，它非常适合较小的紧凑菜单等。为了让sticky起作用，你的父元素不能有任何溢出属性，否则它将不起作用。 ***.com/a/44929597/2175373 现在大多数浏览器都支持它，只是不支持表头caniuse.com/#feat=css-sticky【参考方案9】：

#nav
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
    margin: 0 auto;
    z-index: 9999;
    background-color: white;

【讨论】：

请添加描述，为什么这是问题的答案。这是晚餐很酷的答案！感谢一百万您让我度过了愉快的一天，根据上述要求，您的解决方案是什么！【参考方案10】：

我最喜欢grdevphl's Javascript answer，但在我自己的用例中，我发现在计算中使用height() 仍然会留下一点重叠，因为它没有考虑填充。如果您遇到同样的问题，请尝试使用outerHeight() 来补偿填充和边框。

$(document).ready(function() 
    var contentPlacement = $('#header').position().top + $('#header').outerHeight();
    $('#content').css('margin-top',contentPlacement);
);

【讨论】：

【参考方案11】：

这是一种使用 jQuery 的响应式方法。

 $(window).resize(function () 
      $('#YourRelativeDiv').css('margin-top', $('#YourFixedDiv').height());
 );

【讨论】：

【参考方案12】：

#spacer div 必须放在标题和主体之间，如下所示：

<header>
</header>
<div id="spacer"></div>
<main>
</main>

标题的position 将是fixed，而分隔符将保持其默认的static 位置：

header position: fixed;

最后，您需要确保 header 和 spacer 具有相同的与大小相关的属性，如下所示：

header, #spacer 
    height: 100px;
    max-height: 35vh;

这至少对我有用。

【讨论】：

【参考方案13】：

有（至少）一种方法可以在不使用 javascript 的情况下获得真正的动态高度：两次插入菜单：

在流程中定位以下元素，然后为所需的视觉效果修复后。

<div id="the-menu-container">
    <nav class="position-static">...</nav>
    <nav class="position-fixed">...</nav>
</div>

根据您网站的其他部分，您可能需要调整 z-index 元素的 z-index 样式。

【讨论】：

除了position: sticky，这是唯一一个纯CSS并且支持动态高度的解决方案。如果使用 React、Vue 等框架，您可以通过创建可重用组件来消除大部分重复内容。确实，position: sticky 是首选方式。记得用它设置top 属性... ;-)

以上是关于如何使内容出现在固定的 DIV 元素下方？的主要内容，如果未能解决你的问题，请参考以下文章

如何使DIV的高度固定，当超出固定高度时，让文字自动上下循环滚动

使元素出现在顶部，但在可点击的下方[重复]

如何使DIV背景透明内容不透明

多个DIV自动横向排列如何自动撑开父级DIV并出现横向滚动条？父级div就固定了宽，当内容多时自动出滚动条

div内容显示问题？

如何使 flexbox 响应式？