Заставляем HTML-контент расширяться, чтобы заполнить окно

StackOverflow https://stackoverflow.com/questions/551180

  •  23-08-2019
  •  | 
  •  

Вопрос

У меня есть 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.Хотя просто фиксированная высота будет вполне приемлемой.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top