Question

我正在尝试使用bootstrap navbar-fixed-top我在我的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中。并且标题在所有方面都排在最前面。

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

以下是解决方案：

{{1}}

如果您想要修复侧边栏，还需要将＃column-left位置固定

Answer 3

基本上你想要#content应该是可滚动的，剩下的一切都应该修复。为此，我在html和css

中做了一些更改

我已将导航<nav class="navbar navbar-default navbar-shadow">移至#header。
在标题navbar-fixed-top中添加了#header类。只有当您按照步骤＃3操作时，这才会将header修复到窗口。
为position: relative删除了#header CSS。
使用CSS，将top padding添加到body，其等于#header的高度。如果你想要，你也可以使用JS。

Here is the working example

Answer 4

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

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

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

Bootstrap navbar-fixed-top不在我的div id =＆＃34;内容＆＃34;

4 个答案: