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