CSS – 使内容出现在固定的DIV元素下面

我的目的是在页面顶部创build一个菜单，即使用户滚动，页面顶部仍然保留（就像Gmail最近的function，这个function有用户向下滚动的常用button，以便它们可以执行对消息的操作，而不必滚动到页面的顶部）。

我也想设置下面的菜单下面的内容 – 目前，它出现在它的后面。

我的目标是这样的：

+________________________+ | 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; 这并没有帮助。

Answer 1

你需要的是一个额外的空格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; } 

在这里看我的例子。

这是通过抵消nav div占用的空间来实现的，但是它的position: fixed; 它已经被取出了文档stream程。

---

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

Answer 2

如果你的菜单高度是可变的（为了响应或者是dynamic加载的），你可以将顶部边距设置为固定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/ ），除了固定的导航菜单和标题之外，还有一点变化，希望能够成为一个有用的示例。

Answer 3

我刚刚有这个问题，这是我的解决scheme：

 #floatingMenu + * { margin-top: 35px; } 

调整您的floatingMenu的高度。 如果你不知道它是一个div，那么你可以使用*而不是div 。 这是所有有效的CSS2。

Answer 4

用另一个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; } 

而关于菜单下方的页面，你可以给它一个填充顶部：

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

Answer 5

我刚刚添加了一个填充顶部到导航下面的div。 希望能帮助到你。 我是新来的 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; } 

Answer 6

刚刚为此而苦恼，不喜欢一些“黑客”的解决scheme，我发现这是有用的和干净的：

 #floatingMenu{ position: sticky; top: 0; } 

Answer 7

你应该尝试一下，我希望这将帮助你，甚至提供更好的function来使用固定导航

clear:both; 你不需要清楚

Answer 8

对那些build议使用margin-top或padding-top将主分区移动到固定菜单下面的人来说，你似乎没有完全testing它。

如果您设置了边距或填充，则会随页面一起滚动，您将丢失线条 – 请尝试此页面

看起来不错，不是吗？ 突出显示底部可见行上的一个单词，然后按下页面向下 – 具有突出显示的单词的行以及其他几行将在固定分割下滚动。

保证金顶部或填充顶部会将主分区定位在固定分割下方，但是当您向下翻页或单击滚动条滚动页面的一个视口高度时，它将全部落在其面上。

同样的问题，如果你页面上，线“脱落”的视图端口的底部。

有没有人有这个问题的实际解决？

我知道如何定位事物 – 如果您知道关于边距，填充等的基本知识，那么这很容易 – 但是如何在滚动时避免线条的丢失？

我已经看了很多例子，声称是一个function正常的页面，顶部有固定的分区，但是他们不工作！ 他们都有滚动的问题。

我遇到了一些页面似乎工作，但如果固定的分工更高，线路将会丢失。 我相信我知道他们为什么似乎工作。

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

回答 – 你看到滚动的底线成为顶线。

似乎工作的固定菜单页面确实没有。 滚动它们，底线从视口滚动，但由于下一行是可见的，看起来固定分割是可行的 – 但我们知道更好，不是吗？

如果固定分数高于一行文本的高度，则失败，线路丢失。

我见过的唯一真正能够正常工作的网页是在雅虎这样的网站上，我没有时间也没有倾向于深入了解页面上的很多CSS，HTML和JavaScript，到事情的中心。

所以 – 去那个页面，看看你是否可以修改（“检查”的元素，并修改了CSS规则），修复滚动问题。

如果可以的话，回来和世界分享你的发现。

我的页面是一个很好的地方，看看能够修复顶部的一个分区，把它放在中心（和主分区），并将其限制在最大宽度。 它可能会帮助你们中的一些人，但是我很抱歉，我没有修复滚动问题

玩固定师的高度 – 使其足够短，以便只有一行显示，然后与滚动播放。 然后使它足够大，两行，然后三个和滚动播放。 你会看到的问题。

这是一个应该工作的页面 ，但它不是 – 读最后一个评论 – 他们以不同的方式描述问题，但它是同样的问题

我只是在Chrome中再次testing了这个页面，看起来工作起来相当令人满意。 用FF存在这个问题。 还没有尝试过IE浏览器。

所以 – FF有什么不同？

这是cNet上的一个页面，它和chrome和ff一起工作，所以他们在做什么？

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