Twitter Bootstrap: div em contêiner com 100% de altura

129

Usando o twitter bootstrap (2), tenho uma página simples com uma barra de navegação e, no interior container, quero adicionar uma div com 100% de altura (na parte inferior da tela). Meu css-fu está enferrujado, e 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%;
}
  • EDIT *

Adicionei altura à classe de preenchimento, conforme sugerido abaixo. Mas, o problema é que eu adiciono uma parte superior de preenchimento ao corpo para explicar a barra de navegação fixa na parte superior. Isso afeta a altura de 100% da div "map" e significa que uma barra de rolagem é adicionada - como pode ser visto aqui: http://jsfiddle.net/S3Gvf/2/ Alguém pode me dizer como consertar?

css twitter-bootstrap height Matt Roberts
fonte
1
Então você só quer esticar essa div em todas as direções?
Andres Ilich
1
Sim, eu quero isso para preencher o espaço deixado após a div nav
Matt Roberts

Respostas:

129

Defina a classe .fillcomoheight: 100%

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

JSFiddle

(Coloquei um fundo vermelho para #mapque você possa ver que ele ocupa 100% de altura)

Horen
fonte
Obrigado, tente isso mais tarde e informe-o novamente. Não posso acreditar que eu perdi essa correção simples :)
Matt Roberts
2
Obrigado, esse tipo de trabalho, mas a navegação de inicialização do twitter, que é uma posição fixa, faz o mapa sair do fundo - você precisa rolar para o fundo. Não sei como fazer a div abranger todo o espaço de tela disponível menos a barra de navegação.
27612 Matt Matt Roberts
2
jsfiddle.net/S3Gvf/4 uso box-sizing:border-box;no elemento com o estofamento (tag body) para uma solução fácil
Horen
1
Não tenho muita certeza de como esse css3 voodoo funciona, mas funciona :) :) Muito obrigado!
22812 Matt Matt Roberts
1
O #map é realmente oculto atrás da barra de navegação neste exemplo.
Ethereal
37

Atualização 2019

No Bootstrap 4 , o flexbox pode ser usado para obter um layout de altura total que preenche o espaço restante.

Primeiro de tudo, o contêiner (pai) precisa ter altura total:

Opção 1_ Adicione uma classe para min-height: 100%;. Lembre-se de que a altura mínima só funcionará 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_ Usar vhunidades:

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

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

Em seguida, use a coluna de direção da caixa flexível d-flex flex-columnno contêiner e flex-grow-1em qualquer div filho (ou seja :) rowque você deseja preencher a altura restante.

Veja também:
Bootstrap 4 Barra de navegação e altura de preenchimento de conteúdo flexbox
Bootstrap - Encha o recipiente de fluido entre o cabeçalho e o rodapé
Como fazer a linha esticar a altura restante

Zim
fonte
Por que parece que essas duas abordagens são contra-intuitivas, simplesmente criando um segundo contêiner que ocupa o restante da altura inferior da janela? Deve haver flexibilidade para o desenvolvedor fazer o que quiser com o bootstrap no espaço especificado acima.
klewis
Você realmente acha que isso merece um voto negativo? "simplesmente criando um segundo contêiner que ocupa o restante da altura inferior da janela" .. você tem um exemplo de como isso funcionaria? o ponto principal é height:100%não consumir simplesmente o restante da altura inferior, mas sim consumir 100% da altura da janela de exibição, criando uma barra de rolagem vertical. É por isso que o mapa exige que você role para baixo na resposta aceita.
Zim
você é um desenvolvedor respeitado nesses formulários para o BootStrap. Eu não te votei, alguém fez. Estou surpreso com a sua resposta, porque a maioria delas é altamente votada. Eu gostaria de ter um exemplo de como isso funcionou. Ainda não encontrei nada, mas seria bom se o flexbox tivesse uma maneira fácil de preencher o restante de um elemento na parte inferior da página. Obrigado por tentar fornecer uma resposta, eu apenas assumiria que estávamos lá na implementação fácil disso. Eu não acho que :)
klewis
1
Ok, como indicado na resposta "use a coluna de direção do flexbox d-flex flex-column no contêiner e flex-grow-1 em qualquer div filho (ex .: linha) que você deseja preencher a altura restante" ... pai é altura de 100%, como explicado
Zim
3

É muito simples. Você pode usar

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

Você pode alterar a altura de acordo com sua exigência.

Sumit Kumar Gupta
fonte
1

você precisa adicionar padding-top ao elemento "fill", além de adicionar o tamanho da caixa: border-box - exemplo aqui bootply

mamezito
fonte