Usando o bootstrap do twitter (2), eu tenho uma página simples com uma barra de navegação, e dentro do container Eu quero adicionar um div com 100% de altura (na parte inferior da tela). Meu css-fu está enferrujado, e eu não consigo resolver isso.
HTML simples:
<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 atual:
#map {
width: 100%;
height: 100%;
min-height: 100%;
}
html, body {
height: 100%;
}
.fill {
min-height: 100%;
}
- EDITAR *
Eu adicionei altura à classe de preenchimento, como sugeridoabaixo. Mas, o problema é que eu adiciono um top de preenchimento ao corpo para dar conta da barra de navegação fixa no topo. Isso afeta a altura de 100% do div do "mapa" e significa que uma barra de rolagem é adicionada - como visto aqui: http://jsfiddle.net/S3Gvf/2/ Alguém pode me dizer como consertar?
Respostas:
102 para resposta № 1Definir a turma .fill para height: 100%
.fill {
min-height: 100%;
height: 100%;
}
(Eu coloquei um fundo vermelho para #map então você pode ver que ocupa 100% de altura)
1 para resposta № 2
você precisa adicionar padding-top ao elemento "fill", além de adicionar box-sizing: border-box - sample aqui inicializar
0 para resposta № 3
Atualizar 2018
Dentro Bootstrap 4, o flexbox pode ser usado para obter cheio layout de altura que preenche o espaço restante.
Primeiro de tudo, o contêiner (pai) precisa ser altura total:
Opção 1_ Adicione uma turma para min-height: 100%;. Lembre-se que min-height só trabalhe se o pai tiver uma altura definida:
html, body {
height: 100%;
}
.min-100 {
min-height: 100%;
}
https://www.codeply.com/go/dTaVyMah1U
Opção 2_ Use vh unidades:
.vh-100 {
min-height: 100vh;
}
https://www.codeply.com/go/kMahVdZyGj
Em seguida, use a coluna de direção do flexbox d-flex flex-column no recipiente e flex-grow-1 em qualquer criança divs (ie: row) que você deseja preencher a altura restante.
Veja também:
Bootstrap 4 Navbar e altura de preenchimento de conteúdo flexbox
Bootstrap - Encha o recipiente de fluido entre o cabeçalho e o rodapé
Bootstrap 4: Como aumentar a altura restante da fileira?