Twitter Bootstrap: div в контейнере со 100% высотой

Используя twitter bootstrap (2), у меня есть простая страница с навигационной панелью, а внутри container я хочу добавить div со 100% высотой (в нижней части экрана). Мой css-fu ржавый, и я не могу с этим справиться.

Простой HTML:

<body>
  <div class="navbar navbar-fixed-top">
   <!-- Rest of nav bar chopped from here -->
  </div>
  <div class="container fill">
    <div id="map"></div> <!-- This one wants to be 100% height -->
  </div>
</body>

Текущий CSS:

#map {
    width: 100%;
    height: 100%;
    min-height: 100%;
}

html, body {
    height: 100%;
}

.fill { 
    min-height: 100%;
}
  • EDIT *

Я добавил высоту в класс заполнения, как предлагается ниже. Но проблема в том, что я добавляю верхнюю часть в тело, чтобы учесть фиксированную навигационную панель наверху. Это влияет на 100-процентную высоту "map" div и означает, что добавлена ​​полоса прокрутки - как показано здесь: http://jsfiddle.net/S3Gvf/2/ Может ли кто-нибудь сказать мне, как исправить?

Ответы

Ответ 1

Установите класс .fill в height: 100%

.fill { 
    min-height: 100%;
    height: 100%;
}

JSFiddle

(Я положил красный фон на #map, чтобы вы могли видеть, что он занимает 100% высоты)

Ответ 2

Обновление 2019

В Bootstrap 4 можно использовать flexbox для получения макета полной высоты, который заполняет оставшееся пространство.

Прежде всего, контейнер (родительский) должен быть полной высоты:

Вариант 1_ Добавить класс для min-height: 100%;. Помните, что min-height будет работать только в том случае, если родительский объект имеет определенную высоту:

html, body {
  height: 100%;
}

.min-100 {
    min-height: 100%;
}

https://www.codeply.com/go/dTaVyMah1U

Вариант 2_ Использовать vh единицы:

.vh-100 {
    min-height: 100vh;
}

https://www.codeply.com/go/kMahVdZyGj

Затем используйте столбец направления flexbox d-flex flex-column на контейнере и flex-grow-1 на любом дочернем элементе div (т. Е.: row), который вы хотите заполнить оставшейся высотой.

Также смотрите:
Bootstrap 4 Navbar и высота заполнения контента flexbox
Bootstrap - заполнить контейнер для жидкости между верхним и нижним колонтитулом
Как заставить ряд растянуть оставшуюся высоту

Ответ 3

Это очень просто. Ты можешь использовать

.fill .map 
{
  min-height: 100vh;
}

Вы можете изменить высоту в соответствии с вашими требованиями.

Ответ 4

вам нужно добавить padding-top для элемента "fill", а также добавить размер окна: border-box - sample here bootply