Сделайте div заполнить высоту оставшегося пространства экрана

в настоящее время я работаю над веб-приложением, где я хочу, чтобы контент заполнял высоту всего экрана.

страница имеет заголовок, который содержит логотип и информацию о счете. Это может быть произвольная высота. Я хочу, чтобы содержимое div заполнило остальную часть страницы внизу.

у меня есть заголовок div контент div. На данный момент я использую таблицу вот так:

CSS и HTML

#page {

    height: 100%; width: 100%

}



#tdcontent {

    height: 100%;

}



#content {

    overflow: auto; /* or overflow: hidden; */

}

<table id="page">

    <tr>

        <td id="tdheader">

            <div id="header">...</div>

        </td>

    </tr>

    <tr>

        <td id="tdcontent">

            <div id="content">...</div>

        </td>

    </tr>

</table>

вся высота страницы заполнена, и прокрутка не требуется.

для чего-либо внутри содержимого div, установка top: 0; положим его прямо под заголовком. Иногда содержимое будет реальной таблицей, с ее высотой, установленной на 100%. Положить header внутри content не допустят к работе.

есть ли способ, чтобы достичь того же эффекта без использования table?

обновление:

элементы внутри контент div также будут установлены высоты в процентах. Так что на 100% внутри div заполнит его до дна. Как и два элемента на 50%.

обновление 2:

например, если заголовок занимает 20% высоты экрана, таблица, указанная на 50% внутри #content займет 40% пространства экрана. До сих пор оборачивая всю вещь в таблице-это единственное, что работает.