Лучший способ обработки нескольких прокручиваемых столбцов

Question

Я нахожусь в процессе разработки веб-приложения, которое визуально состоит из заголовка над телом, содержащего четыре столбца содержимого переменной высоты. Боги дизайна решили, что он должен быть фиксированной высоты, главным образом потому, что каждый столбец потенциально может быть очень длинным, и поэтому (будучи дизайнерами) им нужны фреймы с независимыми полосами прокрутки.

Четыре (потенциальные) полосы прокрутки достаточно плохие, но если общая высота страницы зафиксирована выше, чем у окна браузера, то в итоге получится пять! «Нормальное» решение в таком случае, конечно, состоит в том, чтобы зафиксировать общую высоту страницы примерно в 700 пикселей, чтобы дать ей «лучший шанс» для подгонки по вертикали, но я не хочу этого делать по разным причинам, которые я надеюсь будет очевидным.

Итак, мой вопрос: как лучше всего создать контейнер тела, который заполняет доступное пространство (по вертикали), когда каждый столбец выполняет одно и то же? Это даже практично / возможно? Дополнительный вопрос: могу ли я надежно использовать свойство переполнения CSS для столбцов или мне нужны неприятные iframes? У меня большой опыт работы с CSS, но практически нет использования процентных размеров (особенно в сочетании с пиксельными измерениями, которые понадобятся для заголовка). Кроме того, он должен быть совместимым со стандартами и обратно совместимым с IE6.

ТИА.

РЕДАКТИРОВАТЬ: я не ищу решение для макета CSS как таковое, моя проблема заключается в том, чтобы удовлетворить потребность каждого столбца в максимальной высоте, возможной в контейнере тела и прокручиваемой, без фиксации высоты тела в пикселей - если только мне это не нужно.

Answer 1

Я почти уверен, что это именно то, что вам нужно: Жидкостная разметка 4 колонок с фиксированной высотой баннера и нижнего колонтитула

Нет iframes, нет java-скрипта, и каждый столбец автоматически заполняет доступную высоту.

Answer 2

В ответ на ваш второй вопрос, просто установите свойство height в CSS, чтобы контент никогда не становился больше, чем вам нужно. Вы можете использовать overflow-y: scroll (недопустимый CSS, но работает), чтобы наложить полосу прокрутки на элемент.

Answer 3

Я пробовал различные сочетания DIV элементов, вложенных друг в друга, один из которых установлен на height:100%, а другой padding:60px, и я не могу найти способ, чтобы внутренняя часть имела эффективную высоту 100% -60px. Проблема в том, что процентные высоты относятся к атрибуту height содержащего элемента, а не к высоте минус поля и отступы. Вздох.

Я должен сказать, что хотел бы, чтобы CSS позволял выражать высоту в виде суммы (или разности) в процентах, относительно шрифта и единицах пикселей (как в

)

width: 12em - 2px;
border: 1px solid #FED; /* Total width including border is 12em exactly */

или

width: 25% - 1em;
margin: 1.25em 1em;

и т. Д., Как TeX с его единицами fil).

Я думаю, что вам лучше всего иметь JavaScript, который проверяет высоту баннера и вычитает его из высоты области просмотра, а затем соответствующим образом устанавливает высоту поля, содержащего столбцы. Затем вы узнаете, какой размер экрана использует разработчик, и зададите в файле CSS значение по умолчанию для проводного подключения, чтобы оно соответствовало их дисплеям.

Answer 4

Вы говорите о чем-то подобном?

<div id="head"></div>
<div id="body">
  <div id="col1"></div>
  <div id="col2"></div>
  <div id="col3"></div>
  <div id="col4"></div>
</div>

CSS

#body { position: absolute; top: 60px /* height of the header */; bottom: 0px; width: 100%;  }
#body div { position: absolute; top:0; bottom:0 ;width: 25% }

Это может не работать в IE6, для которого вам придется использовать JavaScript:

window.onResize = function () {
    // Calculate the height of the body, substract the height of the head and apply to all columns
}