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

Używanie twitter bootstrap (2), mam prostą stronę z paskiem nawigacji, a wewnątrz container chcę dodać div z wysokością 100% (na dole ekran). Mój css-fu jest zardzewiały i nie mogę tego rozwiązać.Twitter Bootstrap: div w kontenerze ze 100% wysokością

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%; 
}

EDIT *

Dodałem do klasy wysokość napełnienia jak sugeruje poniżej. Problem polega jednak na tym, że dodam do ciała obicie w celu uwzględnienia stałego paska nawigacyjnego na górze. Wpływa to na 100% wysokość "mapy" div i oznacza, że pasek przewijania zostaje dodany - jak widać tutaj: http://jsfiddle.net/S3Gvf/2/ Czy ktoś może mi powiedzieć, jak to naprawić?

Źródło

2012-07-26 Matt Roberts

Więc chcesz rozciągnąć ten div we wszystkich kierunkach? –

Tak, chcę, żeby wypełniło się miejsce po divie nawigacji. –

Set klasa .fill do height: 100%

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

JSFiddle

(kładę czerwone tło dla #map więc widać zajmuje 100% wysokości)

Źródło

2012-07-26 21:07:16 Horen

Dzięki, spróbuję później i zgłoś się ponownie. Nie mogę uwierzyć, że ominąłem tę prostą poprawkę :) –

Dzięki, ten rodzaj prac, ale nawigacja twitter bootstrap, która jest stała, sprawia, że mapa znika - musisz przewinąć do dołu. Nie wiem jak zrobić podział na cały dostępny obszar ekranu MINUS na pasku nawigacji. –

możesz dodać swój pasek nawigacyjny do jsfidlle, więc widzę problem? – Horen

trzeba dodać dopełnienie -najlepszy do elementu "wypełnij", a także dodaj rozmiar pudełka: ramka-pole - próbka tutaj bootply

Źródło

2015-08-17 13:34:33 mamezito

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

Odpowiedz

Powiązane problemy