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 марки: Auth»

Что я m, пытающийся достичь, является прокручиваемым столбцом слева, а столбец2 - справа. Оба столбца1 и столбец2 должны начинаться ниже панели навигации и должны доходить до конца окна. Я пробовал тонны решений, используя абсолютное положение, jQuery или их сочетание. Пока это более близкое обходное решение, которое я нашел: http://jsfiddle.net/vgxvpjdv/3/ Но он не работает для xs-устройств, так как пользователь нажимает на кнопку, чтобы развернуть навигационную панель (обрушившийся гамбургер), элементы перекрывают столбцы ниже. Это схема того, что я пытаюсь достичь:

Я хотел бы сохранить бутстраповские классы сетки (если это возможно), чтобы иметь мои столбцы отзывчивые.

Это полный код Navbar:

<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. Navbar крепится к верхней

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

2. CSS с 2 столбца ниже навигационной панели с использованием фиксированного положения и реагирования

   @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 'переполнение-у: прокручивать' и "переполнение-й: фиксированный?

Это должно решить проблему, просто дать отдельные имена столбцов класса, таких как .scrollcontent и .fixedcontent

и в вашем CSS дать им свойства переполнения.

.scrollcontent { overflow-y: scroll; // или использовать авто, если нет необходимости в свитке }