Как сделать, чтобы div заполнял оставшееся пространство экрана по высоте?

На самом деле, в CSS нет надежного и кросс-браузерного способа сделать это. Если ваш макет имеет сложности, вам нужно использовать JavaScript для установки высоты элемента. Суть того, что вам нужно сделать, заключается в следующем:

Высота элемента = Высота окна просмотра - element.offset.top - желаемый нижний отступ

После того как вы получите это значение и установите высоту элемента, необходимо прикрепить обработчики событий как к событию onload, так и к onresize у окна, чтобы можно было вызвать вашу функцию изменения размера.

Также, если ваш контент может быть больше, чем окно просмотра, вам нужно будет установить overflow-y в значение scroll.

В вашем коде вы используете CSS правило height: calc(100vh - 110px); для элемента с классом .body. Это выражение предназначено для вычисления высоты элемента с учётом высоты других элементов на странице — в данном случае .header и .footer.

Ваш шаблон выглядит следующим образом:

.header { height: 60px; top: 0; background-color: green }
.body {
    height: calc(100vh - 110px); /* 60px (header) + 50px (footer) */
    background-color: gray;
}
.footer { height: 50px; bottom: 0; }

Объяснение:

• 100vh — это 100% высоты видимой области (viewport) браузера.
• 110px — это сумма высот .header (60px) и .footer (50px).

Таким образом, calc(100vh - 110px) позволяет задать высоту .body так, чтобы она занимала оставшееся пространство между шапкой и подвалом, что делает макет более адаптивным и удобным.

HTML структура:

<div class="header">
    <h2>My header</h2>
</div>
<div class="body">
    <p>The body</p>
</div>
<div class="footer">
    My footer
</div>

Эта структура позволяет правильно реализовать ваш макет: шапка будет находиться сверху, затем контент тела, и внизу — подвал. Такой подход обычно используется для создания постоянных элементов, которые остаются на экране при прокрутке страницы.

Если у вас есть дополнительные вопросы по этому коду или CSS в целом, не стесняйтесь задавать!

В CSS3 есть простой способ задать высоту элемента с учетом высоты другого элемента, используя свойство calc(). Например:

height: calc(100% - 10px); /* 10px — это высота вашего первого div */

Это решение поддерживается всеми основными браузерами на сегодняшний день, так что можете смело использовать его, если нет требований поддерживать устаревшие браузеры.

Это можно сделать с помощью чистого CSS, используя единицы измерения vh (высота вьюпорта):

#page {
    display: block; 
    width: 100%; 
    height: 95vh !important; 
    overflow: hidden;
}

#tdcontent {
    float: left; 
    width: 100%; 
    display: block;
}

#content {      
    float: left; 
    width: 100%; 
    height: 100%; 
    display: block; 
    overflow: scroll;
}

А вот и разметка HTML:

<div id="page">
   <div id="tdcontent"></div>
   <div id="content"></div>
</div>

Я проверял, это работает во всех основных браузерах: Chrome, IE и Firefox.