Динамическая высота контейнера (jQuery)

Question

У меня есть заголовок фиксированной высоты (180 пикселей) и нижний колонтитул фиксированной высоты (50 пикселей). Я бы хотел, чтобы высота контейнера была: высота окна MINUS верхний колонтитул MINUS нижний колонтитул.

Как мне добиться этого с помощью jQuery?

Отредактировано для добавления: если высота контейнера обновляется при изменении размера окна, это было бы здорово!

Answer 1

Нет необходимости использовать jquery.

С помощью css (я отметил ключевые моменты, чтобы он заработал, вы можете соответствующим образом изменить значения):

#header
{
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;          /* KEY POINT */
    overflow: hidden;
}

#footer
{
    position: absolute;    /* KEY POINT */
    bottom: 0;
    left: 0;
    width: 100%;
    height: 36px;          /* KEY POINT */
    overflow: hidden;
}

#contents
{
    position: fixed;       /* KEY POINT */
    top: 83px;             /* KEY POINT */
    left: 0;
    right: 0;
    bottom: 39px;          /* KEY POINT */
    right: 0;
    overflow: auto;
}

Результат примерно такой:

|----------------------------------------|
|              div#header                |
|            (80px height)               | 
|----------------------------------------|
|                                        |
|              div#contents              |
|         (top 83px, bottom 39px)        |
|                                        |
|----------------------------------------|
|              div#footer                |
|             (36px height)              |
|----------------------------------------|

Это эмулирует старые кадры. В этом примере между div.

есть небольшой промежуток в 3 пикселя.

EDIT2 : Если вы используете некоторые другие элементы с абсолютным позиционированием (например, всплывающие подсказки), вам нужно добавить это условие, чтобы избежать странного мерцания в IE7:

<!--[if IE 7]>
    <style type="text/css">
        #header
        {
            position: absolute;
        }
    </style>
<![endif]-->

РЕДАКТИРОВАТЬ3 : кажется, я не вставил все это. Этот бит важен для работы с IE6. Обратите внимание, что это не один из хаков обычного выражения.

* html body
{
    /* YOU'LL RECOGNIZE THESE NUMBERS WITH THE EXAMPLE ABOVE */
    padding: 83px 0 39px 0;  
}

* html #contents
{
    height: 100%;
    width: 100%;
}

Читайте здесь для получения дополнительной информации.