Полноразмерная боковая панель bootstrap 3.0

Я пытаюсь сделать загрузочные элементы div полной длины.

Это то, что я пробовал до сих пор: http://jsfiddle.net/bKsad/315/

html, body {
    min-height: 100%
}
.wrap {
    height: 100%
}
.sidebar {
    background-color:#eee;
    background-repeat: repeat;
    padding:0;
    min-height:100% !important;
    position:relative;
}
.sidebar .sidebar-content {
    height:100%;
    width:100%;
    padding: 5px;
    margin:0;
    position:relative;
}

Поскольку правая колонка становится длиннее, я хочу, чтобы боковая панель делала то же самое.


html sidebar responsive-design twitter-bootstrap-3
person black_rabbit    schedule 21.11.2013    source источник
comment
Было бы определенно полезно, если бы вы включили код, показывающий, что вы уже пробовали.   -  person Brian    schedule 21.11.2013
comment
Вы хотите, чтобы это была полная высота чего? body или окно?   -  person Mr Lister    schedule 22.11.2013
comment
Отредактированный пост с загрузочным фрагментом.   -  person black_rabbit    schedule 22.11.2013
comment
Я не могу понять, как работать bootply, я получаю 403 ошибки, но если вы хотите, чтобы боковая панель была такой же высокой, как тело, страница должна знать, какова высота тела.   -  person Mr Lister    schedule 22.11.2013

Ответы (4)


arrow_upward
35
arrow_downward

Ключ в том, чтобы понять стили «col-md-x» и «col-md-offset-x», предоставляемые Bootstrap 3:

<div class="container-fluid">
 <div class="row">
  <div class="col-md-3 sidebar">
   Sidebar Content
  </div>
  <div class="col-md-9 col-md-offset-3 content">
   Main Content
  </div>
 </div>
</div>

Затем используйте CSS, чтобы убедиться, что точки останова совпадают. Вам нужно будет точно настроить padding/margin для ваших конкретных нужд, но точки останова offset и @media довольно хорошо справляются с общей компоновкой:

html, body, .container-fluid, .row {
    height: 100%;
}

.sidebar {
  background-color: #CCCCCC;
}

@media (min-width: 992px) {
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1000;
    display: block;
    background-color: #CCCCCC;
  }
}

Рабочее решение: http://www.bootply.com/111837.

Если вы используете «col-sm-x» или «col-lg-x», вы просто меняете CSS @media на соответствующую минимальную ширину (768 пикселей для sm и 1200 пикселей для lg). Bootstrap обрабатывает все остальное.

person pjfamig    schedule 07.02.2014
comment
это недопустимое решение, если боковая панель имеет высоту, превышающую высоту окна, она не будет прокручиваться - person Slim Fadi; 21.12.2015
comment
@SlimFadi, ничего не меняя из вышеперечисленного, добавьте под своим .sidebar CSS следующее: overflow: scroll; Это должно делать свое дело! - person Alexandros Gouvatsos; 03.02.2017

arrow_upward
4
arrow_downward

Я решил эту проблему, используя абсолютно позиционированный div и немного jQuery. У меня есть навигационная панель Bootstrap с фиксированной высотой 50 пикселей, поэтому вы видите 50 в коде. Вы можете удалить это, если у вас нет верхней панели навигации.

Это решение работает динамично с любой высотой.

CSS:

.sidebar {
    background-color: #333333;
    position: absolute;
    min-height: calc(100% - 50px);
}

JQuery:

var document_height = $(document).height();
var sidebar = $('.sidebar');
var sidebar_height = sidebar.height();

if (document_height > sidebar_height) {
    sidebar.css('height', document_height - 50);
}

Самое приятное в этом то, что не будет мерцания фона, потому что он использует CSS для настройки минимальной высоты, так что изменение размера jQuery, которое обычно вызывает мерцание фона, будет скрыто при загрузке страницы.

person kjdion84    schedule 16.04.2017

arrow_upward
0
arrow_downward

подход 1: добавлен пустой div со стилем = "clear:both" в конце обернутого div. http://jsfiddle.net/34Fc5/1/

подход 2: http://jsfiddle.net/34Fc5/:

html, body {
    height: 100%;
}
.wrap {
    height: 100%;
    overflow: hidden;
}
.sidebar {
    background-color:#eee;
    background-repeat: repeat;
    padding:0;
    height:100% !important;
    position:relative;

}
.sidebar .sidebar-content {
    height:100%;
    width:100%;
    padding: 5px;
    margin:0;
    position:relative;
}

добавлено «переполнение: скрыто;» на .wrap изменена высота: 100% на html, высота тела изменена: 100% на .sidebar

используя css, высота боковой панели будет соответствовать только порту просмотра браузера. поэтому, если вы посмотрите на подход 1, при прокрутке вы заметите остановку фона в окне просмотра. для исправления требуется js.

person Shadow_boi    schedule 26.11.2013
comment
Этот метод не работает для правых боковых панелей. Как заставить это работать? - person Rick Scolaro; 25.09.2014

arrow_upward
0
arrow_downward

Единственное, что заставило меня работать (после многих часов попыток всего) было

HTML <nav class="col-sm-3 sidebar">

CSS padding-bottom: 100%;

Заполнение в процентах сделало это за меня. Теперь он идет до самого низа страницы.

person Yoko    schedule 25.08.2016