Question

我需要在我的顶部导航栏下方放置一个div，它不应像导航栏一样滚动页面内容。

我尝试将其创建为第二个导航栏，但它仍在滚动或导致两个导航栏上方出现空白区域。

我该怎么做？

更新

在此示例中，绿色栏位于导航栏的顶部，但我需要它保持在导航栏下方：http://jsfiddle.net/julianonunes/y8YqK/

如果我在导航栏之前移动绿色条形码（下面的代码示例），它会被导航栏隐藏。

例如：

<div class="navbar navbar-decoration navbar-fixed-top"></div>
<div class="navbar navbar-default navbar-remote navbar-fixed-top">
    <div class="navbar-header"> <a href="#" class="navbar-brand">Brand</a>

    </div>
</div>

Answer 1

你可能已经尝试过了，但是在第二个导航栏的css中放了

position: fixed;

如果您不想添加到样式表，可以将它放在div中：

<div style="position: fixed;"> </div>

我不确定，但你可能还需要像这样添加display：block：

<div style="position: fixed; display: block;"> </div>

使用Bootstrap，在其html / css中使用此逻辑：

<div class="navbar" style="position: fixed; display: block;">
  <div class="navbar-inner">
    <a class="brand" href="#">Title</a>
    <ul class="nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
    </ul>
  </div>
</div>

我的最后一次猜测：

<div class="navbar" style="margin-top: 10px;">
  <div class="navbar-inner">
    <a class="brand" href="#">Title</a>
    <ul class="nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
    </ul>
  </div>
</div>

希望其中一件作品。

Answer 2

确定。问题是你的第二个div包括'navbar-fixed-top'，它将它粘贴到你的屏幕顶部。你不希望它固定在顶部 - 你只是希望它固定在主导航栏下面的位置。将第二个nag的html更改为：

<div class="navbar navbar-default navbar-remote navbar-decoration ">

并添加到导航栏装饰类：

width: 100%
position: fixed;

Answer 3

我通过使用navbar-fixed-top将margin-top添加到第二个导航栏来修复它。

<div class="navbar navbar-default navbar-remote navbar-fixed-top">
    <div class="navbar-header"> <a href="#" class="navbar-brand">Brand</a>

    </div>
</div>
<div class="navbar navbar-decoration navbar-fixed-top"></div>

CSS

.navbar-decoration {
    margin-top: 50px;
    min-height: 5px;
    max-height: 5px;
/* ... */
}

如何在导航栏下方放置div

3 个答案: