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

css twitter-bootstrap height

— Метт Робертс
джерело

1

Отже, ви просто хочете розтягнути цю діву в усі сторони?

— Андрес Ілліч

1

Так, я хочу, щоб він заповнив простір, що залишився після навіву

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

129

Встановіть клас .fillнаheight: 100%

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

JSFiddle

(Я поклав червоний фон, #mapщоб ви могли бачити, що він займає 100% висоту)

— Горен
джерело

Дякуємо, спробую це пізніше та звіт. Не можу повірити, що я пропустив це просте виправлення :)

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

2

Дякуємо, такий вид працює, але twitter bootstrap nav, який є фіксованим положенням, змушує карту знизитися знизу - вам потрібно прокрутити донизу. Я не знаю, як зробити поділ на весь доступний екранний простір MINUS на панелі навігації.

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

2

jsfiddle.net/S3Gvf/4 використання box-sizing:border-box;елемента з накладкою (тег body) для легкого вирішення проблеми

— Хорен

1

Я не надто впевнений, як працює цей css3 вуду, але це працює :) Дуже дякую!

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

1

У цьому прикладі #map насправді затьмарюється позаду панелі навігації.

— Ethereal

37

Оновлення 2019 року

У 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на будь-яких дочірніх дівах (тобто :), rowякі ви хочете заповнити решту висоти.

Також дивіться:
Bootstrap 4 Navbar і зміст висоти заповнення Flexbox
Bootstrap - Наповніть контейнер для рідини між колонтитулами
Як зробити ряд розтягнути залишилася висоту

— Зім
джерело

Чому здається, що обидва ці підходи є протиінтуїтивними для простого створення другого контейнера, який займає решту нижньої висоти вікна? Розробник повинен мати гнучкість робити що завгодно з завантажувальним пристроєм у вказаному вище просторі.

— klewis

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

— Зім

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

— klewis

1

Гаразд, як зазначено у відповіді "використовуйте стовпчик напрямку flexbox d-flex flex-column на контейнері, а flex-raste-1 на будь-яких дочірніх дівах (тобто: рядок), якими ви хочете заповнити висоту, що залишилася" ... батько на 100% зростає, як пояснено

— Зім

3

Це дуже просто. Можна використовувати

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

Ви можете змінити висоту відповідно до своїх вимог.

— Суміт Кумар Гупта
джерело

1

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

— мамезіто
джерело