Ботстрап 3.0 полная длина боковая панель тела

Я пытаюсь получить bootstrap divs для полной длины тела.

Это то, что я пробовал до сих пор: 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;
}

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

Ответ 1

Ключ должен понимать стили "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, чтобы убедиться, что список точек останова. Вам нужно будет тонко настраивать отступы/поля для ваших конкретных потребностей, но контрольные точки смещения и @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", вы просто меняете @media CSS на соответствующую минимальную ширину (768px для sm и 1200px для lg). Bootstrap обрабатывает остальные.

Ответ 2

Я решил это, используя абсолютно позиционированный 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, которое обычно вызывает мерцание фона, будет скрыто при загрузке страницы.

Ответ 3

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

approch 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;
}

добавлено "переполнение: скрыто"; обернуть измененная высота: 100% до html, тело измененная высота: 100% на .sidebar

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

Ответ 4

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

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

CSS padding-bottom: 100%;

Прописная часть в процентах сделала это для меня. Теперь он полностью подходит к нижней части страницы.