Question

我的页面顶部有一个div空间，用于存放徽标和标语。它下面是一个响应式固定导航栏（twitter bootstrap 3）。当我的窗口最小化时，顶部div变得响应并增加它的高度，但它下面的固定导航栏不尊重它的高度增加（并保持在同一位置）。

如何让固定导航栏允许顶部div允许它的高度增加空间？

这就是发生的事情：

enter image description here

   <div class="welcometop" >

      <div class="container-fluid">

        <div class="row">
          <div class="col-md-1 col-md-offset-1"><a href="/"><img src="/images/citylightslogo.png" alt="logo"  id="cllogo"/></a></div>
            <div class="col-md-7 col-md-offset-1">
     <h1 id="headline33" > 100% Satisfaction Guaranteed!</h1><h1 id="headline24" > Call Anytime! (888) 777-6666 </h1>
           </div>

       </div> 
      </div>
     </div> <!-- Close Welcome Top -->


    <div class=" navbar navbar-default navbar-fixed-top " role="navigation">
      <nav role="navigation">
       <div class="container-fluid">
     <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header"><button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#midnav">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
     </button>
        </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
  <div class="collapse navbar-collapse" id="midnav">
     <ul class="nav navbar-nav">
      <li><a href="/home.html">Home</a></li>
    <li><a href="/office.html">Office</a></li>
    <li><a href="reviews.html">Reviews</a></li>
<li><a href="h/">Find us on Angie's List</a></li>
 <li><a href="/>Yelp</a></li>

     </ul>
     </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
   </nav>
  </div><!-- /.navbar-default -->

Answer 1

如果您想为导航栏保留position: fixed，您将拥有：

要么在与导航栏高度相同的内容中添加margin-top（或padding-top），
或创建下面的空格div（=具有较低的z-index）相同高度的导航栏，其中position: relative或未定义位置（= inherit）。

编辑：我忘记了，如果你的内容有一个绝对的位置，固定的静态，你显然必须管理内容的top css属性。

Answer 2

不要给出任何最高价值。在bootstrap中，top:0;被给出。要覆盖它，请使用

.navbar-fixed-top {
    top: auto;
}

因此，您的固定导航栏将始终位于.welcometop div。

之下

要使.welcometop和.navbar固定在最顶层，请尝试下面的内容。

<div class="welcometop affix" >
    <div class="container-fluid">
        <!-- codes for top area of navbar -->
    </div>
    <div class="navbar navbar-default" role="navigation">
        <!-- codes for navbar -->
    </div>
</div>

注意：从.navbar-fixed-top删除.navbar课程。将.affix添加到.welcometop

如何使固定导航栏尊重响应div空间的响应高度

2 个答案: