Faça div (altura) ocupar a altura restante do pai

http://jsfiddle.net/S8g4E/

Eu tenho um contêiner divcom dois filhos. O primeiro filho tem uma determinada altura. Como faço para que o segundo filho ocupe o "espaço livre" do container divsem dar uma altura específica?

No exemplo, o rosa divdeve ocupar também o espaço em branco.

Semelhante a esta pergunta: Como fazer div ocupar a altura restante?

Mas não quero dar posição absoluta .

Expandir o #downfilho para preencher o espaço restante #containerpode ser realizado de várias maneiras, dependendo do suporte do navegador que você deseja alcançar e se #uptem ou não uma altura definida.

Amostras

.container {
  width: 100px;
  height: 300px;
  border: 1px solid red;
  float: left;
}
.up {
  background: green;
}
.down {
  background: pink;
}
.grid.container {
  display: grid;
  grid-template-rows: 100px;
}
.flexbox.container {
  display: flex;
  flex-direction: column;
}
.flexbox.container .down {
  flex-grow: 1;
}
.calc .up {
  height: 100px;
}
.calc .down {
  height: calc(100% - 100px);
}
.overflow.container {
  overflow: hidden;
}
.overflow .down {
  height: 100%;
}

<div class="grid container">
  <div class="up">grid
    <br />grid
    <br />grid
    <br />
  </div>
  <div class="down">grid
    <br />grid
    <br />grid
    <br />
  </div>
</div>
<div class="flexbox container">
  <div class="up">flexbox
    <br />flexbox
    <br />flexbox
    <br />
  </div>
  <div class="down">flexbox
    <br />flexbox
    <br />flexbox
    <br />
  </div>
</div>
<div class="calc container">
  <div class="up">calc
    <br />calc
    <br />calc
    <br />
  </div>
  <div class="down">calc
    <br />calc
    <br />calc
    <br />
  </div>
</div>
<div class="overflow container">
  <div class="up">overflow
    <br />overflow
    <br />overflow
    <br />
  </div>
  <div class="down">overflow
    <br />overflow
    <br />overflow
    <br />
  </div>
</div>

Rede

O gridlayout do CSS oferece outra opção, embora possa não ser tão simples quanto o modelo Flexbox. No entanto, ele requer apenas o estilo do elemento do contêiner:

.container { display: grid; grid-template-rows: 100px }

O grid-template-rowsdefine a primeira linha como uma altura fixa de 100 px e as linhas restantes se esticarão automaticamente para preencher o espaço restante.

Tenho certeza de que o IE11 requer -ms-prefixos, então certifique-se de validar a funcionalidade nos navegadores que você deseja oferecer suporte.

Flexbox

O Módulo de Layout de Caixa Flexívelflexbox do CSS3 ( ) agora é bem suportado e pode ser muito fácil de implementar. Por ser flexível, funciona até quando #upnão tem altura definida.

#container { display: flex; flex-direction: column; }
#down { flex-grow: 1; }

É importante observar que o suporte do IE10 e IE11 para algumas propriedades do flexbox pode ser problemático, e o IE9 ou versões anteriores não têm suporte algum.

Altura Calculada

Outra solução fácil é usar a unidade funcional CSS3calc , como Alvaro aponta em sua resposta , mas exige que a altura do primeiro filho seja um valor conhecido:

#up { height: 100px; }
#down { height: calc( 100% - 100px ); }

É amplamente suportado, com as únicas exceções notáveis ​​sendo <= IE8 ou Safari 5 (sem suporte) e IE9 (suporte parcial). Alguns outros problemas incluem o uso de calc em conjunto com transform ou box-shadow , portanto, certifique-se de testar em vários navegadores se isso for do seu interesse.

Outras Alternativas

Se um suporte mais antigo for necessário, você pode adicionar height:100%;para #downaumentar a altura total do div rosa, com uma ressalva. Isso causará estouro para o contêiner, porque o #upestá empurrando para baixo.

Portanto, você pode adicionar overflow: hidden;ao contêiner para consertar isso.

Alternativamente, se a altura de #upfor fixa, você pode posicioná-lo absolutamente dentro do contêiner e adicionar uma tampa de preenchimento a #down.

E, ainda outra opção seria usar um display de mesa:

#container { width: 300px; height: 300px; border: 1px solid red; display: table;}
#up { background: green; display: table-row; height: 0; }
#down { background: pink; display: table-row;}​

Já se passaram quase dois anos desde que fiz essa pergunta. Acabei de sugerir css calc () que resolve este problema que eu tive e pensei que seria bom adicioná-lo caso alguém tenha o mesmo problema. (Aliás acabei usando a posição absoluta).

http://jsfiddle.net/S8g4E/955/

Aqui está o css

#up { height:80px;}
#down {
    height: calc(100% - 80px);//The upper div needs to have a fixed height, 80px in this case.
}

E mais informações sobre isso aqui: http://css-tricks.com/a-couple-of-use-cases-for-calc/

Suporte para navegador: http://caniuse.com/#feat=calc

Minha resposta usa apenas CSS, e não overflow: hidden ou display: table-row. Exige que o primeiro filho realmente tenha uma determinada altura, mas em sua pergunta você afirma que apenas o segundo filho precisa ter sua altura não especificada, então acredito que você deve achar isso aceitável.

html

<div id="container">
    <div id="up">Text<br />Text<br />Text<br /></div>
    <div id="down">Text<br />Text<br />Text<br /></div>
</div>

css

#container { width: 300px; height: 300px; border:1px solid red;}
#up { background: green; height: 63px; float:left; width: 100% }
#down { background:pink; padding-top: 63px; height: 100%; box-sizing: border-box; }

http://jsfiddle.net/S8g4E/288/

verifique a demonstração - http://jsfiddle.net/S8g4E/6/

use css -

#container { width: 300px; height: 300px; border:1px solid red; display: table;}
#up { background: green; display: table-row; }
#down { background:pink; display: table-row;}

A menos que eu sou mal-entendido, você pode simplesmente adicionar height: 100%;e overflow:hidden;para #down.

#down { 
    background:pink; 
    height:100%; 
    overflow:hidden;
}​

Demonstração ao vivo

Editar: Uma vez que você não deseja usar overflow:hidden;, você pode usar display: table;para este cenário; no entanto, não é compatível antes do IE 8. ( display: table;suporte )

#container { 
    width: 300px; 
    height: 300px; 
    border:1px solid red;
    display:table;
}

#up { 
    background: green;
    display:table-row;
    height:0; 
}

#down { 
    background:pink;
    display:table-row;
}​

Demonstração ao vivo

Nota: você disse que deseja que a #downaltura seja a #containeraltura menos a #upaltura. A display:table;solução faz exatamente isso e este jsfiddle vai retratá-lo muito claramente.

Você pode usar flutuadores para empurrar o conteúdo para baixo:

http://jsfiddle.net/S8g4E/5/

Você tem um contêiner de tamanho fixo:

#container {
    width: 300px; height: 300px;
}

O conteúdo pode fluir próximo a um flutuador. A menos que definamos o flutuador para largura total:

#up {
    float: left;
    width: 100%;
}

Embora #upe #downcompartilhe a posição superior, #downo conteúdo de só pode começar após a parte inferior do flutuado #up:

#down {
    height:100%;
}​

Resumo

Não encontrei uma resposta totalmente satisfatória, então tive que descobrir sozinho.

Meus requisitos:

• o elemento deve ocupar exatamente o espaço restante quando seu tamanho de conteúdo é menor ou maior que o tamanho do espaço restante (no segundo caso, a barra de rolagem deve ser exibida );
• a solução deve funcionar quando a altura do pai é calculada , e não especificada ;
• calc()não deve ser usado porque o elemento restante não deve saber nada sobre os tamanhos de outros elementos;
• técnicas de layout modernas e familiares , como flexboxes, devem ser usadas.

A solução

• Transforme em flexboxes todos os pais diretos com altura computada (se houver) e o próximo pai cuja altura seja especificada ;
• Especifique flex-grow: 1para todos os pais diretos com altura calculada (se houver) e o elemento para que ocupem todo o espaço restante quando o tamanho do conteúdo do elemento for menor;
• Especifique flex-shrink: 0para todos os itens flexíveis com altura fixa para que não fiquem menores quando o tamanho do conteúdo do elemento for maior que o tamanho do espaço restante;
• Especifique overflow: hiddenpara todos os pais diretos com altura calculada (se houver) para desativar a rolagem e proibir a exibição de conteúdo de estouro;
• Especifique overflow: autopara o elemento para permitir a rolagem dentro dele.

JSFiddle (elemento tem pais diretos com altura computada)

JSFiddle (caso simples: sem pais diretos com altura computada)

Não tenho certeza se isso pode ser feito puramente com CSS, a menos que você se sinta confortável em fingir com ilusões. Talvez use a resposta de Josh Mein e defina #containercomo overflow:hidden.

Para valer a pena, aqui está uma solução jQuery:

var contH = $('#container').height(),
upH = $('#up').height();
$('#down').css('height' , contH - upH);