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

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

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

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

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

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

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

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

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

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

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

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

Ответы

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;
}