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

89

Используя 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
    Итак, вы просто хотите растянуть этот div во всех направлениях?
  • 1
    Да, я хочу заполнить пространство, оставшееся после nav div
Теги:
height

2 ответа

97
Лучший ответ

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

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

JSFiddle

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

Поделиться
  • 0
    Спасибо, попробую позже и доложу. Не могу поверить, что я пропустил это простое исправление :)
  • 2
    Спасибо, этот вид работает, но навигационная панель Twitter, которая является фиксированной позицией, заставляет карту уходить из-под дна - вам нужно прокрутить до дна. Я не знаю, как сделать разделение div на все доступное пространство экрана МИНУС навигационной панели.
Показать ещё 9 комментариев
1

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

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню