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

Question

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

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

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

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

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

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

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

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

Некоторые варианты я рассмотрел:

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

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

Answer 1

Использование высоты: атрибут 100% CSS должен заставить его работать.

Посмотрите, работает ли Dave Woods 100% Height Layout Using CSS.

Answer 2

Это немного известный аспект свойства CSS position: absolute;, который даст вам макет, который вы ищете. Вы можете абсолютно позиционировать элемент во ВСЕХ 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>. Используйте ems, если размер шрифта является проблемой.

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