Лучший способ работать с несколькими столбцами прокрутки
Я занимаюсь разработкой веб-приложения, которое визуально состоит из заголовка над телом, содержащего четыре столбца с содержимым переменной высоты. Боги дизайна установили фиксированную высоту, главным образом потому, что каждый из столбцов потенциально может стать очень длинным, и поэтому (будучи дизайнерами) им нужны фреймы с независимыми полосами прокрутки.
Четыре (потенциальных) полосы прокрутки - это плохо, но если общая высота страницы зафиксирована выше, чем окно браузера, то в итоге будет пять! «Нормальным» решением в таком случае, конечно же, является установка общей высоты страницы примерно на 700 пикселей, чтобы дать ей «лучший шанс» подойти по вертикали, но я не хочу этого делать по разным причинам, которые я Надеюсь, это будет очевидно.
Итак, мой вопрос: как лучше всего иметь контейнер тела, который заполняет доступное (вертикальное пространство), и каждый столбец выполняет одно и то же? Это вообще практично / возможно? Дополнительный вопрос: могу ли я надежно использовать свойство переполнения CSS для столбцов или мне нужны неприятные фреймы? У меня большой опыт работы с CSS, но почти никакого с использованием процентных размеров (особенно в сочетании с размерами в пикселях, которые мне понадобятся для заголовка). Кроме того, он должен соответствовать стандартам и быть обратно совместимым с IE6.
TIA.
Обновлено: Я не ищу решение макета CSS как таковое, моя проблема в том, как учесть необходимость того, чтобы каждый столбец имел максимальную высоту, возможную в контейнере тела и прокручиваемую, без фиксации высоты тела в пикселях - если только Мне это абсолютно необходимо.
Ответы 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
}
В ответ на ваш второй вопрос просто установите свойство height в CSS, чтобы контент никогда не становился больше, чем вам нужно. Вы может используете overflow-y: scroll (недействительный CSS, но работает), чтобы установить полосу прокрутки на элементе.
Ура, но какую высоту установить? Моя первая мысль, конечно, 100%, но я не уверен, что это сработает надежно. Я понимаю, что мне нужно провести серьезное тестирование, но я надеялся, что кто-то еще там уже прошел ...
Я пробовал различные перестановки элементов DIV, вложенных друг в друга, один установлен на height:100%, а другой - на padding:60px, и я не могу придумать способ получить эффективную высоту для внутреннего элемента 100% -60 пикселей. Проблема в том, что процентная высота относится к атрибуту 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, чтобы оно соответствовало их дисплеям.
Я почти уверен, что это именно то, что вам нужно: Жидкий 4-колоночный макет с баннером и нижним колонтитулом фиксированной высоты
Без iframe, без java-скрипта, и каждый столбец автоматически заполняет доступную высоту.
Спасибо, Дмитрий, действительно есть масса способов добиться макета, но меня беспокоит фиксированная высота и прокрутка столбцов.