Estoy buscando una manera de hacer que el div que contiene el contenido de mi página principal se expanda para adaptarse al espacio que queda después de agregar mi encabezado y pie de página. El HTML se presenta así:

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

Está diseñado para que el pie de página siempre pase la parte inferior de la página al establecer la altura mínima de #wrapper al 100%. El problema es que #content no se expande para llenar el espacio vacío dentro del #wrapper, lo que dificulta obtener el aspecto que quiero. ¿Cómo puedo hacer que haga eso?