Веб-страница: несколько областей прокрутки с переменной высотой

Question

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

Пока проблем нет.

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

Я не линкею фреймы и хочу часто изменять содержимое 2-х столбцов, используя javascript (ajax).

Как лучше всего создать такую ​​страницу?

Answer 1

Я проверял это в IE7 / 8 (не 6!) И последних версиях: Firefox, Chrome, Opera.

Live Demo (в комплекте со скучными цветами)

HTML очень прост:

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

<div id="middle">
    <div id="left">left</div>
    <div id="right">right</div>
</div>

<div id="footer">footer</div>

С другой стороны, CSS немного сложнее:

html, body {
    margin: 0; padding:0; border: 0;
    overflow: hidden
}
#header, #middle, #footer {
    position: absolute;
    width: 100%
}
#header {
    background: #777;
    height: 150px;
    top: 0
}
#middle {
    background: #f00;
    top: 150px;
    bottom: 150px
}
#footer {
    background: #777;
    height: 150px;
    bottom: 0
}
#left, #right {
    overflow-y: scroll
}
#left {
    background: #aaa;
    position: absolute;
    left: 0;
    top: 0;
    width: 50%;
    height: 100%
}
#right {
    background: #999;
    position: absolute;
    left: 50%;
    top: 0;
    float: right;
    width: 50%;
    height: 100%
}

Я объясню, как работает CSS, если вы попросите меня.

Answer 2

Попробуйте использовать проценты для делений (и пропустите таблицу). Например, вы можете установить заголовок на height: 20%, а два средних элемента прокрутки на height: 70%; width: 50%; float:left;. Это оставляет div нижнего колонтитула в height: 10%. Изменение содержимого средних элементов div с помощью ajax не должно изменять их высоту. Но, конечно, это обеспечивает переменную, не фиксированную, верхний и нижний колонтитулы.

примечание: эти цифры приведены только для иллюстрации. Вам нужно будет изменить их, включая отступы / поля, которые не учитываются.