Блог

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

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

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

ТИА.

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

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

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

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

 <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, но работает), чтобы создать полосу прокрутки для элемента.

Я перепробовал различные перестановки 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 в соответствии с их дисплеями.