Twitter Bootstrap: element div w kontenerze ze 100% wysokością

132

Używając Twittera Bootstrap (2), mam prostą stronę z paskiem nawigacyjnym, a wewnątrz containerchcę dodać element div o wysokości 100% (na dole ekranu). Moje css-fu jest zardzewiałe i nie mogę tego rozwiązać.

Prosty 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>

Aktualny CSS:

#map {
    width: 100%;
    height: 100%;
    min-height: 100%;
}

html, body {
    height: 100%;
}

.fill { 
    min-height: 100%;
}

EDYTOWAĆ *

Dodałem wysokość do klasy wypełnienia, zgodnie z sugestią poniżej. Ale problem polega na tym, że dodaję wyściółkę do ciała, aby uwzględnić stały pasek nawigacyjny u góry. Wpływa to na 100% wysokość div "map" i oznacza, że zostanie dodany pasek przewijania - jak widać tutaj: http://jsfiddle.net/S3Gvf/2/ Czy ktoś może mi powiedzieć, jak to naprawić?

css twitter-bootstrap height

— Matt Roberts
źródło

1

Więc chcesz po prostu rozciągnąć ten element div we wszystkich kierunkach?

— Andres Ilich

1

Tak, chcę, aby wypełniło miejsce po div div

— Matt Roberts

129

Ustaw klasę .fillnaheight: 100%

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

JSFiddle

(Umieściłem czerwone tło #map, abyś mógł zobaczyć, że zajmuje 100% wysokości)

— Horen
źródło

Dzięki, spróbuję później i zdam raport. Nie mogę uwierzyć, że przegapiłem tę prostą poprawkę :)

— Matt Roberts

2

Dzięki, ten rodzaj działa, ale twitter bootstrap nav, który jest stałą pozycją, sprawia, że mapa schodzi z dołu - trzeba przewijać na sam dół. Nie wiem, jak ustawić podział div na całą dostępną przestrzeń ekranu MINUS na pasku nawigacyjnym.

— Matt Roberts,

2

jsfiddle.net/S3Gvf/4 użyj box-sizing:border-box;na elemencie z dopełnieniem (tag body) dla łatwego obejścia

— Horen

1

Nie jestem pewien, jak działa voodoo css3, ale działa :) Dziękuję bardzo!

— Matt Roberts

1

W tym przykładzie #map jest właściwie zasłonięty za paskiem nawigacyjnym.

— Ethereal

40

Zaktualizuj 2019

W Bootstrap 4 , flexbox może być użyty do uzyskania układu o pełnej wysokości, który wypełni pozostałą przestrzeń.

Przede wszystkim kontener (rodzic) musi mieć pełną wysokość:

Opcja 1_ Dodaj zajęcia dla min-height: 100%;. Pamiętaj, że minimalna wysokość zadziała tylko wtedy, gdy rodzic ma zdefiniowany wzrost:

html, body {
  height: 100%;
}

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

https://www.codeply.com/go/dTaVyMah1U

Opcja 2_ Użyj vhjednostek:

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

https://www.codeply.com/go/kMahVdZyGj

Następnie użyj kolumny kierunkowej flexbox d-flex flex-columnna kontenerze i flex-grow-1na wszystkich podrzędnych elementach div (np . :) row, które chcesz wypełnić pozostałą wysokością.

Zobacz także:
Bootstrap 4 Pasek nawigacyjny i wysokość napełniania zawartości Flexbox
Bootstrap - Napełnij zbiornik płynu między nagłówkiem a stopką
Jak sprawić, by wiersz rozciągnął się na pozostałą wysokość

— Zim
źródło

Dlaczego wydaje się, że oba te podejścia są sprzeczne z intuicją polegającą na prostym utworzeniu drugiego pojemnika, który zajmuje pozostałą część dolnej wysokości okna? Deweloper powinien mieć swobodę robienia wszystkiego, co chce z bootstrapem w podanej powyżej przestrzeni.

— klewis

Czy naprawdę uważasz, że to zasługuje na złą opinię? „po prostu tworzenie drugiego pojemnika, który zajmuje resztę dolnej części okna”… czy masz przykład, jak to działałoby? chodzi o to, height:100%że nie zajmuje po prostu reszty dolnej wysokości, ale zamiast tego zajmuje 100% wysokości rzutni, tworząc pionowy pasek przewijania. Dlatego mapa wymaga przewinięcia w dół w zaakceptowanej odpowiedzi.

— Zim,

jesteś szanowanym programistą na tych formularzach dla BootStrap. Nie przegłosowałem cię, zrobił to ktoś inny. Jestem po prostu zaskoczony Twoją odpowiedzią, ponieważ większość Twoich odpowiedzi jest wysoko oceniana. Żałuję, że nie mam przykładu, jak to działało. Jeszcze nic nie znalazłem, ale byłoby miło, gdyby flexbox miał łatwy sposób na wypełnienie reszty elementu na dole strony. Dzięki za próbę udzielenia odpowiedzi, po prostu zakładam, że udało nam się to łatwo wdrożyć. Chyba nie :)

— klewis

1

Ok, jak stwierdzono w odpowiedzi "użyj kolumny kierunku flexbox d-flex flex-column na kontenerze i flex-grow-1 na dowolnych podrzędnych elementach div (np.: Row), które chcesz wypełnić pozostałą wysokość" ... rodzic ma 100% wzrostu, jak wyjaśniono

— Zim

4

To bardzo proste. Możesz użyć

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

Możesz zmienić wysokość zgodnie z wymaganiami.

— Sumit Kumar Gupta
źródło

1

musisz dodać padding-top do elementu "fill", a także dodać box-sizing: border-box - przykład tutaj bootply

— mamezito
źródło