Używając Twittera Bootstrap (2), mam prostą stronę z paskiem nawigacyjnym, a wewnątrz container
chcę 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
źródło
Odpowiedzi:
Ustaw klasę
.fill
naheight: 100%
.fill { min-height: 100%; height: 100%; }
JSFiddle
(Umieściłem czerwone tło
#map
, abyś mógł zobaczyć, że zajmuje 100% wysokości)źródło
box-sizing:border-box;
na elemencie z dopełnieniem (tag body) dla łatwego obejściaZaktualizuj 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
vh
jednostek:.vh-100 { min-height: 100vh; }
https://www.codeply.com/go/kMahVdZyGj
Następnie użyj kolumny kierunkowej flexbox
d-flex flex-column
na kontenerze iflex-grow-1
na 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ść
źródło
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.To bardzo proste. Możesz użyć
.fill .map { min-height: 100vh; }
Możesz zmienić wysokość zgodnie z wymaganiami.
źródło
musisz dodać padding-top do elementu "fill", a także dodać box-sizing: border-box - przykład tutaj bootply
źródło