Como fazer uma div se expandir para caber no espaço vertical disponível?
Estou procurando uma maneira de fazer com que a div que contém o conteúdo da página principal seja expandida para caber no espaço restante após adicionar meu cabeçalho e rodapé. O HTML é organizado da seguinte maneira:
<div id="wrapper">
<div id="header-wrapper">
<header>
<div id="logo-bar"></div>
</header>
<nav></nav>
</div>
<div id="content"></div>
</div>
<div id="footer-wrapper">
<footer></footer>
</div>
Ele foi projetado para que o rodapé sempre ultrapasse a parte inferior da página, definindo a altura mínima de #wrapper para 100%. O problema é que #content não se expande para preencher o espaço vazio dentro do #wrapper, dificultando a aparência desejada. Como posso fazer isso?