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

Question

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% высоту div" map " и означает, что полоса прокрутки добавляется - как показано здесь:http://jsfiddle.net/S3Gvf/2/ может ли кто-нибудь сказать мне, как исправить?

547 3

css twitter-bootstrap height

3 ответов:

Comments

Ничего не найдено.

Horen · Accepted Answer · 2015-04-10 10:36:31

класс .fill to height: 100%
.fill { 
    min-height: 100%;
    height: 100%;
}
JSFiddle

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

Zim · Accepted Answer · 2018-06-26 05:29:56

обновить 2018

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

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

вариант 1_ добавить класс для min-height: 100%;. Помните, что мин-высота только работа, если родитель имеет определенный рост:
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 любой ребенок divs (т. е.:row), что вы хотите, чтобы заполнить оставшиеся высота.

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

mamezito · Accepted Answer · 2015-08-17 16:34:33

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