Заставляем HTML-контент расширяться, чтобы заполнить окно
Вопрос
У меня есть HTML-страница, разделенная по вертикали на
- Заголовок
- Тело
- Нижний колонтитул
Тело , в свою очередь, разделено по горизонтали на
- Большой DIV слева, окруженный полосами прокрутки, отображающий часть диаграммы
- Форма справа
Верхний и нижний колонтитулы имеют фиксированную высоту.Текст должен расширяться по вертикали, чтобы заполнить ту часть окна, которая не занята верхним и нижним колонтитулами.
Аналогично, форма имеет фиксированную ширину, и панель прокрутки должна расширяться по горизонтали, чтобы заполнить ширину окна.
Диаграмма очень большая (размером до 10х10 дюймов), поэтому я не могу отобразить ее всю.Вместо этого я хочу отобразить как можно больше (используя все окно), чтобы пользователю нужно было прокручивать как можно меньше.
Я также не могу использовать javascript, потому что некоторые пользователи обязательно параноики и должны отключить его.
Некоторые варианты, которые я рассмотрел:
- Таблица, ширина и высота ячейки которой на панели прокрутки равны 100%, а для всех остальных - 1%
Не работает.Таблица (и, следовательно, страница) расширяется, чтобы содержать всю диаграмму, даже при абсолютном позиционировании на DIV панели прокрутки. - Абсолютное позиционирование для смещения панели от нижней части страницы на высоту нижнего колонтитула
Работает, но неточно:высота нижнего колонтитула зависит от текущего размера шрифта и от того, заключен ли текст в оболочку.Это означает, что я должен оставить большой запас, чтобы они не перекрывались. - Поместите диаграмму в IFRAME
Лучшее решение, которое я нашел с отключенными скриптами, но ограничивает то, что я могу делать в скриптах, когда они являются включен.
Я заметил, что Google Maps использует область фиксированного размера для карты, когда скрипты отключены.Если Google отказался от этой проблемы, означает ли это, что она невыполнима?
Решение
Используя высоту:100% CSS-атрибут должен заставить его работать.
Посмотрим , если Дэйв Вудс 100% Верстка по высоте С использованием CSS работает на вас.
Другие советы
Это малоизвестный аспект 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.Хотя просто фиксированная высота будет вполне приемлемой.