将DOM元素移动到固定导航栏下面 [英] Moving DOM elements below a fixed navigation bar

问题描述

我有一个固定的导航栏，但是，任何时候我尝试创建内容后，内容剪辑导航。

I have a fixed navigation bar, however, any time I try to create content after it, the content clips the navigation.

我可以通过使用内容上的相对定位来解决这个问题，但我真的不喜欢这样做。

I could fix this by using relative positioning on the content, but I would really prefer NOT to do that.

如何在不使用奇怪CSS战术的情况下将内容推送到固定导航栏下？

How can I push content below a fixed navigation bar without resorting to strange CSS tactics?

nav{
    position:fixed;
    top:0;
    width:100%;
    border:1px solid black;
}

放置内容类可能是误导，基本上，我想要DOM元素流后导航栏不剪切它。例如，假设以下HTML在导航之后：

Putting the content class may have been misleading, Essentially, I want DOM elements to flow after the nav bar without clipping it. For example, imagine the following HTML coming after the nav:

<section>foo</section>
<p>bar</p>
<h2>fubar</h2>
<div>blah blah blah </div>

我想看到导航栏后面的部分，然后是节后的p

I would like to see the section come after the nav bar, and then the p after the section and so forth.

原始示例问题（不反映问题）：
http://jsfiddle.net/wZHcv/

Original Example Problem (Not Reflective of the problem): http://jsfiddle.net/wZHcv/

新小提琴：
http://jsfiddle.net/4MLVT/

推荐答案

您可以将nav放在div中，然后通过导航高度设置div的高度。这样做的优点是：更容易和更有意义，而在其他地方，您可以使用其他代码而不用担心。

You can put nav inside a div , then set the height of the div by nav height. The advantage of this: easier and more meaningful,and In other places you can use other code without concerns..

<div class="nav-box">
    <nav>
        <ul>
            <li><a href="#">foo</a></li>
            <li><a href="#">bar</a></li>
        </ul>
    </nav>
</div>

示例

这篇关于将DOM元素移动到固定导航栏下面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！