将内容推送到某个位置：固定顶部导航，使其可见

Question

当您使用position:fixed顶部导航栏时会出现此问题：由于导航栏不在文档流中，因此您在其后面放置的初始内容将被导航栏本身隐藏。这个小提示显示我的解决方案，它使用额外的spacer div和padding-top：

http://jsfiddle.net/MFwJT/

HTML

<div class="fixednav">some nav stuff</div>
<div class="navspacer"></div>
main content which should not be covered by nav

CSS

.fixednav { position:fixed; width: 100%; height: 30px; background: #999 }
.navspacer { padding-top: 30px; } /* This works */

2个问题

1. 有更好的解决方案吗？
2. 如果您将padding-top更改为margin-top，则导航条的行为就像间隔符之前而不是之后的。我想知道为什么会这样。

为了澄清问题2，margin-top产生了这个：



而padding-top产生了这个（正确的行为）：

Answer 1

  

是否有更好的解决方案

恕我直言，更好的解决方案是避免假的间隔div navspacer而是使用span，因为您可以使用line-height和一个div轻松实现目标没有假的div

Example Fiddle

<强> CSS

.fixednav {
    width: 100%;
    height: 30px;
    background: #999;
    line-height:90px; /*this is the key here*/
}
.fixednav > span {
    position:fixed;
    display:block;
    width:100%;
    line-height:30px;/*this is the key here*/
}

<强> HTML

<div class="fixednav"> 
    <span>some nav stuff</span>
    main content which should not be covered by nav
</div>

问题2

  

如果将padding-top更改为margin-top，则导航条的行为就像间隔符位于其之前而不是之后。我想知道为什么会这样。

当您提供padding-top: 30px;时，它会应用于内容区域的内部，使整个div高度（如果内容中有任何内容，则为30px +），check this demo to see it

当您提供margin-top: 30px;时，它会应用于内容的外部 demo ，内容重叠，因为FIXED位置div不会跟随文档流而是视口流！ ！

Answer 2

这里的问题是你修复了fixednav的位置而不是navspacer。执行此操作时，fixednav和navspacer位于同一行，因为一个是固定的而不是另一个。当你向navspacer添加填充时，它会从中推出fixednav。当你添加margin-top：30px;它将fixednav和navspacer一起移动。要解决此问题，请向navspacer添加固定位置，并将内容添加到固定的navspacer：

/*html*/    
<div class="fixednav">some nav stuff</div>
<div class="navspacer">main content which should not be covered by nav</div>

/*css*/ 
.fixednav { position:fixed; width: 100%; height: 30px; background: #999 }
.navspacer { position:fixed; margin-top: 30px; } 

这将为您提供正在寻找的正确行为。 这是一个链接：http://jsfiddle.net/4vAgZ/

此外，这张图片可以帮助你填充与边距的关系。 http://s3.amazonaws.com/codecademy-blog/assets/ae09140c.png

希望这有帮助。

Answer 3

您可以像youtube一样使用div作为间距。 这里我做了一个例子，它使用javascript来监听窗口调整大小并在必要时调整间隔。 但是你也可以为每个div使用jQuery plugin。

＆＃13;

＆＃13;

    //initial adjustment
    $(function () { $('#topSpacer').height($('#fixedtop').height()); });

    //adjustment on every resize event        
    $(window).resize(function () {
        $('#topSpacer').height($('#fixedtop').height());
        console.log("<div>" +$('#topSpacer').height() + "</div>");
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div id="topSpacer"></div>

<div>
  Does anyone overlay me?
</div>

    <div id="fixedtop" style="position:fixed; top: 0px;">
        Top navbar elements Page0000000000000 Page11111111111111 Page2222222222222
    </div>

<div>
    Another relative element
</div>

＆＃13;

＆＃13;

＆＃13;