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

129

Используя 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%;
}

РЕДАКТИРОВАТЬ *

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

css twitter-bootstrap height

— Мэтт Робертс
источник

1

Итак, вы просто хотите растянуть этот div во всех направлениях?

— Андрес Ильич

1

Да, я хочу, чтобы он заполнил пространство, оставшееся после навигационного div

— Мэтт Робертс

129

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

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

JSFiddle

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

— Хорен
источник

Спасибо, попробую позже и доложу. Не могу поверить, что пропустил это простое решение :)

— Мэтт Робертс

2

Спасибо, этот вид работает, но навигационная система twitter bootstrap, которая имеет фиксированное положение, заставляет карту уходить вниз - вам нужно прокрутить вниз. Я не знаю, как сделать диапазон div на все доступное экранное пространство МИНУС на панели навигации.

— Мэтт Робертс

2

jsfiddle.net/S3Gvf/4 используйте box-sizing:border-box;элемент с заполнением (тег body) для простого обходного пути

— Хорен

1

Я не совсем уверен, как работает этот css3 voodoo, но он работает :) Большое спасибо!

— Мэтт Робертс

1

В этом примере #map фактически скрыт за панелью навигации.

— Ethereal

37

Обновление 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 Панель навигации и высота заполнения содержимого flexbox
Bootstrap - Заполните контейнер жидкостью между верхним и нижним колонтитулами
Как заставить строку растянуть оставшуюся высоту

— Zim
источник

Почему кажется, что оба этих подхода противоречат простому созданию второго контейнера, который занимает оставшуюся часть нижней высоты окна? Разработчик должен иметь возможность делать все, что захочет, с помощью начальной загрузки в указанном выше месте.

— klewis

Вы действительно думаете, что это заслуживает голоса против? "просто создать второй контейнер, который занимает оставшуюся часть нижней высоты окна" .. у вас есть пример того, как это будет работать? все дело в том, height:100%что не просто занимает оставшуюся часть нижней высоты, а вместо этого используется 100% высоты области просмотра, создавая вертикальную полосу прокрутки. Вот почему в принятом ответе карта требует прокрутки вниз.

— Zim

вы - уважаемый разработчик этих форм для BootStrap. Я не голосовал против тебя, это сделал кто-то другой. Я просто удивлен твоим ответом, потому что большинство твоих ответов высоко оценены. Хотел бы я иметь пример того, как это работает. Я еще ничего не нашел, но было бы неплохо, если бы у flexbox был простой способ заполнения остальной части элемента в нижней части страницы. Спасибо за попытку дать ответ, я просто предполагаю, что мы легко реализовали это. Думаю, нет :)

— klewis

1

Хорошо, как указано в ответе «используйте столбец направления flexbox d-flex flex-column в контейнере и flex-grow-1 для любых дочерних div (например, строк), которые вы хотите заполнить оставшейся высотой» ... рост родителей 100%, как объяснено

— Зим

3

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

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

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

— Сумит Кумар Гупта
источник

1

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

— mamezito
источник