Bootstrap 3：导航栏下方的可滚动列

Question

我在下面有这个页面：

 <nav class="navbar navbar-default">
    <div class="container">
        <div class="navbar-header">

        ......
        </div>
    </div>
</nav>


<div class="container-fluid">
<div class="row">
    <div class="col-md-3 col-sm-5" id="column1">
        <!--  Sidebar content SCROLLABLE -->
        ....
        <!-- Sidebar content end> -->
        </div>
    <div class="col-md-9 col-sm-7" id="column2">
        <!--  body content FIXED -->
        ....
        <!-- body content end> -->
        </div>

导航栏默认由 Laravel 在命令行“php make:auth”中输入生成

我想要实现的是 column1 可在左侧滚动，而 column2 固定在右侧。 column1 和 column2 都应该从导航栏下方开始，并且应该到达窗口的末尾。 我已经尝试过大量使用绝对位置、jQuery 或两者混合的解决方案。到目前为止，这是我发现的更接近的解决方法：http://jsfiddle.net/vgxvpjdv/3/ 但它不适用于 xs 设备，因为当用户点击按钮以展开导航栏（折叠的汉堡包）时，项目与下面的列重叠。 这是我想要实现的方案：

我想保留引导网格类（如果可能）以使我的列响应。

这是完整的导航栏代码：

<nav class="navbar navbar-default">
    <div class="container">
        <div class="navbar-header">

            <!-- Collapsed Hamburger -->
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse">
                <span class="sr-only">Toggle Navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

            <!-- Branding Image -->
            <a class="navbar-brand" href="{{ url('/') }}">
                Laravel
            </a>
        </div>

        <div class="collapse navbar-collapse" id="app-navbar-collapse">
            <!-- Left Side Of Navbar -->
            <ul class="nav navbar-nav">
                <li><a href="{{ url('/home') }}">Home</a></li>
            </ul>

            <!-- Right Side Of Navbar -->
            <ul class="nav navbar-nav navbar-right">
                <!-- Authentication Links -->
                @if (Auth::guest())
                    <li><a href="{{ url('/login') }}">Login</a></li>
                    <li><a href="{{ url('/register') }}">Register</a></li>
                @else
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
                            {{ Auth::user()->name }} <span class="caret"></span>
                        </a>

                        <ul class="dropdown-menu" role="menu">
                            <li><a href="{{ url('/logout') }}"><i class="fa fa-btn fa-sign-out"></i>Logout</a></li>
                        </ul>
                    </li>
                @endif
            </ul>
        </div>
    </div>
</nav>

Answer 1

这是我修复它的方法：

1. 导航栏固定在顶部

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

2. 使用固定位置和响应式导航栏下方的 2 列的 CSS

   @media (min-width: 768px) { 
     #column1 {
     position:fixed;
     top:50px;
     left:0;
     overflow-y: scroll;
     height:calc(100% - 50px);
     }
     #column2 {
     position:fixed;
     top:50px;
     right:0px;
     overflow-y: hidden;
     height:calc(100% - 50px);
     }
   }
   

Answer 2

您是否尝试过使用 CSS 属性“overflow-y:scroll”和“overflow-y:fixed”？

这应该可以解决问题，只需为各个列提供类名称，例如 .scrollcontent 和 .fixedcontent

并在您的 css 中为它们提供溢出属性。

.scrollcontent { 溢出-y：滚动； //或者如果不需要滚动则使用auto }