CSS 如何使内容显示在固定的 DIV 元素下方？

How can I make content appear beneath a fixed DIV element?

提问by Mus

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

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

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:

CSS 代码：

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

HTML Code:

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>  

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

目前，我可以通过将菜单放在我的containerdiv. 但是，内容落后于菜单。我已经设置了clear: both;，但这没有帮助。

回答by Kyle

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

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

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

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

HTML

HTML

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

CSS

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.

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

---

---

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

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

回答by ahanusa

Having just struggled with this and disliking some of the "hackier" solutions, I found this to be useful and clean:

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

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

回答by grdevphl

If your menu height is variable (for responsiveness or because it's loaded dynamically), you can set the top margin to where the fixed div ends. For example:

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

CSS

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

Javascript

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

HTML

HTML

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

---

---

Here's a fiddle (https://jsfiddle.net/632k9xkv/5/) that goes a little beyond this with both a fixed nav menu and header in an attempt to hopefully make this a useful sample.

这是一个小提琴（https://jsfiddle.net/632k9xkv/5/），它通过固定的导航菜单和标题超出了这个范围，希望能使其成为一个有用的示例。

回答by Danimal

I just had this problem, and this was my solution:

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

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

Adjust for the height of your floatingMenu. If you don't know for sure that it's a div following then you can use *rather than div. This is all valid CSS2.

调整浮动菜单的高度。如果您不确定它是 div 后面的，那么您可以使用*而不是div. 这都是有效的 CSS2。

回答by Ty Mick

I liked grdevphl's Javascript answerbest, but in my own use case, I found that using height()in the calculation still left a little overlap since it didn't take padding into account. If you run into the same issue, try outerHeight()instead to compensate for padding and border.

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

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

回答by user4852538

I just added a padding-top to the div below the nav. Hope it helps. I'm new on this. C:

我刚刚在导航下方的 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;
}

回答by Erick Petrucelli

Wrap the menu contents with another div:

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

And the CSS:

和 CSS：

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

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

And about your page below the menu, you can give it a padding-top as well:

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

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

回答by BobN

To those suggesting the use of margin-top or padding-top to move the main division below the fixed menu - you don't seem to be testing it completely.

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

If you set a margin or padding, it will scroll with the page and you will lose lines - go try this page

如果您设置了边距或内边距，它会随着页面滚动，您将丢失线条 - 去试试这个页面

Looks good, does it not? Highlight a word on the bottom visible line and press page-down - the line with the highlighted word, and a few other lines, will be scrolled under the fixed division.

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

Margin-top or padding-top WILL position the main division below the fixed division but it all falls flat on its face when you page-down or click the scroll bar to scroll one viewport height of the page.

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

Same problem if you page-up, lines "fall off" the bottom of the view-port.

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

Does anyone have an actual fix for THIS problem?

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

I know how to position things - that's fairly easy if you know the basics about margins, padding, etc. - but how do you prevent the loss of lines when scrolling?

我知道如何定位东西——如果你了解关于边距、填充等的基础知识，那会很容易——但是你如何防止滚动时丢失线条？

I've looked at a lot of examples of what are claimed to be a properly functioning pages with fixed divisions at the top, but they don't work! They all have problems which scrolling.

我看过很多声称功能正常的页面的例子，顶部有固定的分区，但它们不起作用！他们都有滚动的问题。

I have come across some pages appear to work but if the fixed division is made higher, lines will be lost. I believe I know why they appear to work.

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

Think in terms of how text on a totally normal (no fancy formatting) page scrolls. Do you see the bottom line when you scroll up or do you see the next line - the bottom one having scrolled off the top of the viewport?

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

Answer - you see the bottom line scrolled to become the top line.

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

The fixed menu pages that seem to work really don't. Scroll them and the bottom line is scrolled off the viewport but since the next line is visible, it appears that the fixed division works - but we know better, don't we?

似乎有效的固定菜单页面实际上不起作用。滚动它们，底线从视口中滚动出来，但由于下一行是可见的，似乎固定除法有效 - 但我们更清楚，不是吗？

If the fixed division gets higher than the height of one line of text, they fail and lines are lost.

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

The only pages that I've seen that actually work properly are on sites such as yahoo and I don't have the time, nor inclination, to dig down into what is a lot of CSS, HTML, and JavaScript on the pages to get to the heart of the matter.

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

So - go to that page and see if you can make changes ("inspect" the elements and make changes to the CSS rules) that fix the scrolling problems.

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

If you can, come back and share your discovery with world.

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

My page is a good place to look at what it takes to be able to fix a division at the top, center it (and the main division) and restrict it to a max-width. It may help some of you but I'm sorry I don't have a fix for the scrolling problem

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

Play with the height of the fix division - make it short enough so that only one line shows and then play with the scrolling. Then make it large enough for two lines and then three and play with the scrolling. You'll see the issues.

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

Here is a pagethat is supposed to work but it doesn't - read the very last comment - they describe the problem in a different way but it is the same problem

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

I just tested the page again in Chrome and it seems to work fairly satisfactorily. With FF the problem exists. Haven't tried IE again, yet.

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

So - what is different with FF?

那么 - FF 有什么不同？

Here's a page at cNetwhich works with chrome and ff - so what are they doing?

这是 cNet 上的一个页面，它适用于 chrome 和 ff - 那么他们在做什么？

More testing with Chrome shows that it fails to fully display the bottom line when scrolled. Just part of the line that was at the bottom is visiable when your scroll - so, still need a fix.

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

回答by Hassan Sarwar

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

回答by DerMike

There is (at least) one wayhack to get truly dynamic height without javascript: insert the menu twice:

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

• Once in the flow to position the following elements, and
• once fixed for the desired visual effect.

• 一旦在流中定位以下元素，以及
• 一旦固定以获得所需的视觉效果。

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

Depending on the rest of your site, you might have to tweak the z-indexstyles of the <nav>elements.

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