如何使内容显示在固定的 DIV 元素下方? [英] How can I make content appear beneath a fixed DIV element?

问题描述

我的目的是在页面顶部创建一个菜单，即使用户滚动时该菜单仍保留在页面顶部(例如 Gmail 最近的功能，它具有随用户向下滚动的常用按钮，以便它允许无需滚动到页面顶部即可对消息执行操作).

我还想设置菜单下面的内容出现在它下面——目前它出现在它后面.

我的目标是这样的:

+________________________+|菜单 |<--- 固定菜单 - 即使滚动时也保持在顶部.+¬¬¬¬¬¬...|内容开始||这里|||||||||||||+¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬+ <--- 页面底部.

我希望顶部的菜单永远不会移动并且停留在页面的顶部，即使用户向下滚动也是如此.我还希望当用户位于页面顶部时，主要内容从菜单下方开始，但是当用户向下滚动时，菜单是否超过内容顶部都没有关系.

总结:

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

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

谢谢.

更新:

CSS 代码:

#floatingMenu{清楚:两者；位置:固定；宽度:85%；背景色:#78AB46；顶部:5px；}

HTML 代码:

<a href="http://www.google.com">测试 1</a><a href="http://www.google.com">测试 2</a><a href="http://www.google.com">测试 3</a>

目前，我可以通过将菜单放置在我的 container div 中来让菜单出现在页面顶部并居中.但是，内容落后于菜单.我已经设置了 clear: both; 但这没有帮助.

解决方案

您需要的是一个额外的间距 div(据我了解您的问题).

此 div 将放置在菜单和内容之间，并且与菜单 div 高度相同，包括填充.

HTML

导航选项或其他.
<div class="spacer">&nbsp;

<div id="内容">内容.

CSS

#fixed-menu{位置:固定；宽度:100%；高度:75px；背景色:#f00；填充:10px；}.spacer{宽度:100%；高度:95px；}

在此处查看我的示例.

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

<小时>

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

My intention is to create a menu at the top of the page which remains at the top of the page even when the user scrolls (like Gmail's recent feature which has the commonly-used buttons scrolling down with the user so that it allows them to perform operations on messages without having to scroll to the top of the page).

I would also like to set the content below said menu to appear below it - at present, it appears behind it.

I am aiming for something like this:

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

I hope to have the menu at the top which never moves and which stays at the top of the page, even when the user scrolls down. I am also looking to have the main content begin beneath the menu when the user is at the top of the page, but when the user scrolls down, then it doesn't matter if the menu goes over the top of the content.

Summary:

• I wish to have a fixed position menu at the top of the page which follows the user when scrolling.
• Content must appear BELOW the menu ONLY when the user is at the top of the page.
  • When the user scrolls down, the menu may overlap the content.

Can somebody please explain how to achieve this?

Thank you.

UPDATE:

CSS Code:

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

HTML Code:

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

At present, I can get the menu to appear at the top of the page and centered by placing it inside my container div. However, the content goes behind the menu. I have set clear: both; and this has not helped.

解决方案

What you need is an extra spacing div (as far as I understood your question).

This div will be placed between the menu and content and be the same height as the menu div, paddings included.

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

See my example here.

This works by offsetting the space that would have been occupied by the nav div, but as it has position: fixed; it has been taken out of the document flow.

---

The preferred method of achieving this effect is by using margin-top: 95px;/*your nav height*/ on your content wrapper.

这篇关于如何使内容显示在固定的 DIV 元素下方?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！