Создание содержимого HTML для заполнения окна

У меня есть страница HTML, разделенная по вертикали на

Заголовок
Тело
Footer

Тело в свою очередь разделяется горизонтально на

Большой DIV слева, окруженный полосами прокрутки, отображающий часть диаграммы
Форма справа

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

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

Диаграмма очень большая (до 10x10 экранов), поэтому я не могу ее отобразить. Вместо этого я хочу отображать как можно больше (используя все окно), чтобы пользователь мог прокручивать как можно меньше.

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

Некоторые параметры, которые я рассмотрел:

Таблица с шириной и высотой ячейки панели прокрутки установлена на 100%, а все остальные - на 1%
Не работает. Таблица (и, следовательно, страница) расширяется, чтобы содержать всю диаграмму, даже с абсолютным позиционированием на панели прокрутки DIV.
Абсолютное позиционирование для смещения панели вниз от страницы по высоте нижнего колонтитула
Работает, но неточно: высота нижнего колонтитула зависит от текущего размера шрифта и того, будет ли текст обернут. Это означает, что я должен оставить большой запас, чтобы они не перекрывались.
Поместите диаграмму в IFRAME
. Лучшее решение, которое я нашел с отключенными сценариями, но ограничивает то, что я могу сделать в сценариях, когда они включены.

Я замечаю, что в Картах Google используется область фиксированного размера, когда сценарии отключены. Если Google отказался от этой проблемы, значит ли это, что это невозможно?

Ответ 2

Это немного известный аспект свойства position: absolute; CSS, который даст вам макет, который вы ищете. Вы можете абсолютно позиционировать элемент во ВСЕХ 4 направлениях, сверху, вправо, снизу и слева. Это означает, что ящик может быть таким же текучим, как и браузер, и всегда оставаться на том же расстоянии от границ указанного контейнера.

div {
    position: absolute;
}
#main {
    top: 8em; // 8em
    left: 0; 
    bottom: 8em; // 8em
    right: 300px;
    overflow: auto;
}
#header {
    top: 0;
    left: 0;
    right: 0;
    height: 8em;
}
#sidebar {
    top: 8em;
    right: 0;
    bottom: 8em;
    width: 300px;
    overflow: auto;
}
#footer {
    bottom: 0;
    left: 0;
    right: 0;
    height: 8em;
}

В качестве примера просмотрите http://www.sanchothefat.com/dev/layouts/cssframes.html, а затем просмотрите источник и отделите CSS, чтобы увидеть, как это делается в более сложном примере.

Если вы примете такой подход, вам нужно полностью поместить ВСЕ основной контейнер <div> s. Используйте ems, если размер шрифта является проблемой.

PS. В том, что IE6 запутывает (шокирует!), Есть ошибка, однако пример, который я предоставил, имеет резерв IE6. Только фиксированная высота будет хорошей, хотя.

Ответ 1

Ответ 2