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
источник

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

Ответы: