将DOM元素移动到固定导航栏下方

Question

我有一个固定的导航栏,但是,每当我尝试在其后创建内容时,内容剪辑导航.

我可以通过对内容使用相对定位来解决这个问题,但我真的不愿意这样做.

如何在不诉诸奇怪的CSS策略的情况下将内容推送到固定导航栏下方？

示例导航:

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

放置内容类可能会产生误导,实际上,我希望DOM元素在导航栏之后流动而不会剪切它.例如,假设导航后面出现以下HTML:

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

我希望看到该部分位于导航栏之后,然后是部分之后的部分,依此类推.

原始示例问题(不反映问题):http: //jsfiddle.net/wZHcv/

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

Answer 1

您可以将导航放入div中,然后按导航高度设置div的高度.这样做的好处是:更简单,更有意义,而在其他地方,你可以使用其他代码而不用担心.

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

例