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?