Исправлена ​​боковая панель с установленной шириной с использованием Bootstrap3

Question

Я пытаюсь установить фиксированную прокручиваемую боковую панель с прокручиваемым контентом. Он похож на Make column fixed position in bootstrap, но в этом примере боковая панель имеет переменную ширину.

Я пробовал:

.fixed { 
    position: fixed; 
    width: 290px; 
} 

.scrollit { 
    float: left; 
} 

<div class="row"> 
    <div class="col-md-3 fixed"> 
     Fixed content 
    </div> 
    <div class="col-md-9 scrollit"> 
     scrollable 

    </div> 
</div> 

но это только слои 2 колонки друг на друга.

Пример сайта я пытаюсь повторить это в http://demo.elated-themes.com/borderland9/contact/

Благодарности

Answer 1

Это решение для того, что вы ищете, не нужны классы начальной загрузки (но вам нужно какое-то нормализуются .css).

body { 
 
    padding: 0; 
 
} 
 
.fixed { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    background: red; 
 
    width: 290px; 
 
} 
 
.scrollit { 
 
    background: #000; 
 
    color: white; 
 
    padding-left: 300px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="scrollit"> 
 
    <p class="">Nulla placerat ipsum at velit eleifend, et tristique est ultricies. Sed molestie cursus feugiat. Praesent pulvinar gravida metus mattis viverra. Cras congue convallis pharetra. In hac habitasse platea dictumst. Praesent auctor cursus dolor, a feugiat 
 
    ex convallis vitae. Nulla facilisi. Suspendisse potenti. Aliquam nec purus eu turpis sagittis aliquam. Donec auctor eget urna sit amet eleifend.</p> 
 
    <p class="">Nulla placerat ipsum at velit eleifend, et tristique est ultricies. Sed molestie cursus feugiat. Praesent pulvinar gravida metus mattis viverra. Cras congue convallis pharetra. In hac habitasse platea dictumst. Praesent auctor cursus dolor, a feugiat 
 
    ex convallis vitae. Nulla facilisi. Suspendisse potenti. Aliquam nec purus eu turpis sagittis aliquam. Donec auctor eget urna sit amet eleifend.</p> 
 
    <p class="">Nulla placerat ipsum at velit eleifend, et tristique est ultricies. Sed molestie cursus feugiat. Praesent pulvinar gravida metus mattis viverra. Cras congue convallis pharetra. In hac habitasse platea dictumst. Praesent auctor cursus dolor, a feugiat 
 
    ex convallis vitae. Nulla facilisi. Suspendisse potenti. Aliquam nec purus eu turpis sagittis aliquam. Donec auctor eget urna sit amet eleifend.</p> 
 
    <p class="">Nulla placerat ipsum at velit eleifend, et tristique est ultricies. Sed molestie cursus feugiat. Praesent pulvinar gravida metus mattis viverra. Cras congue convallis pharetra. In hac habitasse platea dictumst. Praesent auctor cursus dolor, a feugiat 
 
    ex convallis vitae. Nulla facilisi. Suspendisse potenti. Aliquam nec purus eu turpis sagittis aliquam. Donec auctor eget urna sit amet eleifend.</p> 
 
</div> 
 
<div class="fixed">Fixed content</div>

Вот fiddle

Надеется, что это помогает. Если это так, +1.