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

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

9 голосов
/ 15 февраля 2009

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

  • Заголовок
  • Body
  • Footer

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

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

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

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

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

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

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

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

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

Ответы [ 2 ]

11 голосов
/ 15 февраля 2009

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

Посмотрите, работает ли Дейв Вудс на 100% высоты с использованием CSS

4 голосов
/ 15 февраля 2009

Это малоизвестный аспект свойства 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> с. Используйте ems, если важен размер шрифта.

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

...