0

我有一个固定的导航栏，但是，每当我尝试在它之后创建内容时，内容都会剪辑导航。

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

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

示例导航：

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

放置内容类可能会产生误导，本质上，我希望 DOM 元素在导航栏之后流动而不剪切它。例如，想象以下 HTML 出现在 nav 之后：

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

我希望看到导航栏之后的部分，然后是部分之后的 p 等等。

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

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

4

2 回答 2

5

您可以将 nav 放在 div 中，然后通过 nav 高度设置 div 的高度。这样做的好处：更简单，更有意义，并且在其他地方您可以使用其他代码而无需担心..

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

例子

于 2013-09-12T04:16:22.183 回答
0

我们应该将导航后的内容包裹在一个 div 中，并设置 position:relative 和 top 大于导航栏的高度。

HTML CODE:
<nav>
   <ul>
     <li><a href="#">foo</a></li>
     <li><a href="#">bar</a></li>
   </ul>
</nav>

<div class="content">
   <section>foo</section>
   <p>bar</p>
   <h2>fubar</h2>
   <div>blah blah blah </div>
</div>

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

nav ul li{
display:inline;
}

nav ul li a{
text-decoration:none;
color:black;
font-size:20px;
-webkit-transition:all .5s;
padding:5px;
}

nav ul li a:hover{
background:black;
color:white;
}
.content{
position:relative;
top:60px;
}
于 2013-09-12T05:55:56.693 回答