HTML - div, чтобы взять 100% оставшейся высоты страницы

Обычно я использую position:absolute для этого, а затем устанавливаю верхнее значение для начала в нижней части заголовка. http://jsfiddle.net/uZ7dD/4/

.content {
    background-color: yellow;
    position:absolute; 
    top:40px; bottom:0; left:0; right:0;
}

В этом случае свойства элементов таблицы имеют некоторое преимущество в том, что они обладают большой позиционирующей силой. В этом случае строки таблицы и ячейки всегда будут настраиваться для заполнения контейнера таблицы.

Очевидно, что вы не хотите использовать фактические элементы таблицы html, поскольку это не было бы семантическим, в котором css входит в игру:

Если вы поместите элемент container/wrapper вокруг вашего заголовка и содержимого, а затем установите его для display: table; с высотой и шириной 100% он будет действовать как элемент базового стола.

Настройка заголовка и содержимого для display: table-row; теперь свяжут их с этим контейнером и разрешат всем использовать свойства таблицы. Установка фиксированной высоты на одну будет по-прежнему работать, а другая просто заполнит оставшееся пространство.

<div class="container">
    <div class="header">i am the header</div>
    <div class="content">i am the <content></content></div>
</div>

И css:

.container { display: table; width: 100%; height: 100%; }
.header, .content { display: table-row; }

Такой подход также имеет хорошую поддержку в браузерах.

Для браузеров css3 просто используйте:

    .content {
        width: 100%;
        background-color: yellow;
        height: -moz-calc(100% - 40px);
        height: -webkit-calc(100% - 40px);
        height: -o-calc(100% - 40px);
        height: calc(100% - 40px);
    }

для браузеров non-css3 это обходное решение, HTML:

    <div class="container">
        <div class="header">i am the header</div>i am the <content></content>
    </div>

CSS

    .header {
        width: 100%;
        height 40px;
        line-height: 40px;
        background-color: blue;
    }

    .container{
        height: 100%;
        background-color: yellow;
    }

Надеюсь, что смогу помочь :)

Я не уверен, что поддержка браузера, как для calc функции CSS, но это было бы хорошим примером для него. Вы можете прочитать об этом здесь. Вам нужно будет изменить height content div на height: calc(100% - 40px). Это, конечно, не учитывает какое-либо пространство, занимаемое margin, padding или border поэтому оно все равно будет переполняться. Если вы убедитесь, что у ваших divs нет ни одного из них, он отлично работает. Вот мой JSFiddle для этого.

Вы также можете использовать position: absolute и установить top значение на 40px а bottom на 0px но ваш родительский элемент должен иметь position: relative набор.

Кроме того, вы можете использовать JavaScript/JQuery, чтобы рассчитать необходимую высоту content DIV и применить его.

Вы имеете в виду, как, что?

Если это так, я использовал

position: fixed;

свойство в CSS.