Bootstrap navbar-fixed-top 在我的 div id="content" 中不起作用

Question

我正在尝试使用引导导航栏固定顶部我的id="content" div 旁边有一个引导导航栏，但是当我将 navbar-fixed-top 添加到此处时

<nav class="navbar navbar-default navbar-fixed-top navbar-shadow">

导航栏位于其他所有内容之上。

问题：我如何才能获得它，以便只有我的 id="content" 中的内容才能在导航栏下滚动？

注意：链接现已更新为工作代码，特别感谢 @Av Avt，感谢之前的每一个人。

代码示例预览

CodePen Code Preview Click Here

CodePen Full View Click Here

HTML

<header id="header">
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                <div class="img-thumbnail">
                    <img src="holder.js/48x48" />
                </div>
                &nbsp;&nbsp;Administration
            </div>
        </div>
    </div>
</header>

<nav id="column-left">
<div id="profile">
    <ul class="media-list">
        <li class="media">
            <div class="media-left">
            <a href="#">
                <img class="media-object img-circle" src="holder.js/64x64" alt="...">
            </a>
        </div>
        <div class="media-body">
            <h4 class="media-heading">John Doe</h4>
            <p>Administrator</p>
        </li>
    </ul>
</div>
<ul id="menu">

<li><a href=""><i class="fa fa-dashboard fa-fw"></i> <span>Dashboard</span></a></li>

<li>
    <a class="parent"><i class="fa fa-cog fa-fw"></i> <span>Drop Down Menu</span></a>
    <ul>
        <li><a href="">Link 1</a></li>
        <li><a class="parent">Sub Drop Down Menu</a>
            <ul>
                <li><a href="">Link 2</a></li>
                <li><a href="">Link 3</a></li>
            </ul>
        </li>
    </ul>
</li>

</ul>    
</nav>

<!-- navbar-fixed-top not work correct when have it in my content id -->    

<div id="content">
<nav class="navbar navbar-default navbar-fixed-top navbar-shadow">
    <div class="container-fluid">

        <div class="navbar-header">
        <button aria-controls="navbar" aria-expanded="false" data-target="#navbar" data-toggle="collapse" class="navbar-toggle collapsed" type="button">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a type="button" id="button-menu" class="navbar-brand"><i class="fa fa-indent fa-lg"></i></a>
        </div>

        <div class="navbar-collapse collapse" id="navbar">
            <ul class="nav navbar-nav">
            </ul>
            <ul class="nav navbar-nav navbar-right">
            <li class="dropdown">
                <a aria-expanded="false" aria-haspopup="true" role="button" data-toggle="dropdown" class="dropdown-toggle" href="#"><i class="fa fa-bell fa-lg"></i> <span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li class="divider" role="separator"></li>
                    <li class="dropdown-header">Nav header</li>
                    <li><a href="#">Separated link</a></li>
                    <li><a href="#">One more separated link</a></li>
                </ul>
            </li>
            <li class="dropdown">
                <a aria-expanded="false" aria-haspopup="true" role="button" data-toggle="dropdown" class="dropdown-toggle" href="#"><i class="fa fa-info-circle"></i> <span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li class="divider" role="separator"></li>
                    <li class="dropdown-header">Nav header</li>
                    <li><a href="#">Separated link</a></li>
                    <li><a href="#">One more separated link</a></li>
                </ul>
            </li>
            <li class="active"><a href="./">Logout <i class="fa fa-sign-out fa-lg"></i></li>
            </ul>
        </div>
    </div>
</nav>
<div class="container-fluid">
<div class="row">
  <div class="col-lg-6 col-md-6">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h1 class="panel-title">Calender</h1>
      </div>
      <div class="panel-body">
      </div>
    </div>
  </div>
</div>
</div>
</div>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/holder/2.9.0/holder.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

来自评论：

我只是希望能够使用引导程序具有的 navbar-fixed-top 功能，但不是像在示例中那样位于页面顶部，而是希望它位于我的内容 ID 中。并且标题 div 一直在顶部。

Answer 1

在您的 css 中添加以下 css 规则：

#content{
  position: relative;
}

#content .navbar-fixed-top{
  position: absolute;
}

在#content 的顶部有了导航栏后，给#content .main-content 一个max-height 作为视口高度减去<header> 的高度，然后给它overflow: auto;：

#content .main-content{
  padding-top: 70px;
  max-height: calc(100vh - 70px);
  overflow: auto;

  /*move the 40px padding (and all bottom/top padding) of #content to .main_content instead */
  padding-bottom: 40px; 
}

<nav class="navbar navbar-default navbar-fixed-top navbar-shadow"> 将继续像普通的.navbar-fixed-top 一样运行，只是它现在只停留在#content 的顶部。

演示：http://codepen.io/anon/pen/gPpOpX

Answer 2

基本上你希望#content 应该是可滚动的，其余的一切都应该是固定的。为此，我对html 和css 做了一些更改

1. 我将导航<nav class="navbar navbar-default navbar-shadow"> 移至#header。

2. 将navbar-fixed-top 类添加到标题#header。这会将header 修复到窗口，前提是您遵循步骤#3。

3. 删除了#header 的position: relative CSS。

4. 使用 CSS，将top padding 添加到body 中，等于#header 的高度。如果你愿意，你也可以使用 JS 来做到这一点。

Here is the working example

Answer 3

不要使用navbar-fixed-top，而是使用jQuery计算可滚动高度：

var h = $(document).height();
$('#content').css({ 'height': h - 120, 'scroll-x': 'auto' });

注意：您可能还需要重新计算 $(window).resize() 的高度。

Answer 4

解决方案如下：

#content .navbar-fixed-top{
 width: calc(100% - 245px);
 top: inherit;
 right: inherit; 
 left: inherit; 
 bottom:inherit;
 }

如果您希望侧边栏也固定，您还需要固定 #column-left 位置