Получить оболочку DIV, чтобы заполнить всю страницу с помощью CSS

Question

У меня есть макет, состоящий из нескольких DIv, navbar вверху, dv нижнего колонтитула внизу и оболочки #frame между двумя для хранения контента.

<div id="nav">
 navbar
</div>

<div id="frame">
 Content
</div>

<div id="footer">
 (c) 2010 MySite.com
</div>

Содержание в #frame, очевидно, будет различаться в зависимости от страницы, и я хочу убедиться, что даже если в #frame всего несколько строк, оно заполнит весь экран и обеспечит #нижний колонтитул всегда лежит внизу страницы.Попытка height:100% приводит к добавлению вертикальных полос прокрутки из-за дополнительной высоты, занимаемой верхним и нижним колонтитулом, и я определенно хотел бы также избежать этого.CSS высота фрейма 89%, но я знаю, что это уродливый хак и сломается, если я изменю верхний и / или нижний колонтитулы.Кто-нибудь знает более элегантный способ сделать это?

Answer 1

Если ваш нижний колонтитул прост, как в примере, то вам повезло. Когда вы знаете высоту нижнего колонтитула, в пикселях или в пикселях, вы можете абсолютно точно расположить его внизу страницы и добавить высоту нижнего колонтитула в нижнем отступе к #frame. Если нижний колонтитул очень плавный, у вас возникнут проблемы с его сокращением, и не существует должного элегантного решения для макета, который вы описываете (хотя flexbox сделает это в WebKit и Gecko; просто подождите, пока IE не догонит).