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

问题描述

我的意图是在页面顶部创建一个菜单，即使用户滚动，菜单也将保留在页面顶部(例如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;，但这没有帮助.

解决方案

您需要的是额外的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;
}

请参见我的示例此处.

这是通过偏移导航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屋！