Столбец с одинаковой высотой с помощью CSS?

Question

Я создаю бизнес-приложение, которое имеет боковую панель переменной ширины и область содержимого, а также нижний колонтитул. Для жизни я не могу понять, как сделать нижний колонтитул ВСЕГДА отображаться правильно, используя CSS, независимо от высоты боковой панели. Вот пример вопроса:

Колонтитула и боковая панель хорошо, если область содержимая больше, чем на боковой панели, а не наоборот (faux columns метод не похож на работу с сноской, и метод equal height with footer работал, только если боковая панель короче).

Любые предложения? Я нашел здесь ответ, который работал только для IE6, но ничего больше не использовал только CSS. Я испытываю соблазн сделать мою жизнь легкой и использовать ТАБЛИЦЫ, но в любом случае мне бы хотелось знать, как это сделать w/CSS (немного javascript не повредит, но не будет лучше).

Answer 1

Один способ заключается в использовании очень большое значения для столбцов padding-bottom и так же большого отрицательной значения для margin-bottom. Что-то вроде следующего:

#container { 
    overflow: hidden; 
} 

#container .column { 
    padding-bottom: 20010px; /* X + padding-bottom */ 
    margin-bottom: -20000px; /* X */ 
} 

#footer { 
    position: relative; 
} 

Лучшее описание метода я видел это в "One True Layout" статье о Position is Everything. (Не забудьте проверить potential problems статьи, а также.)

Answer 2

Единственное решение для этого, которое я использовал, использовало некоторые JS для вычисления высот боковой панели и областей содержимого, а затем их обоих равных. вызов функции JS onload. Если вы можете найти лучшее решение, дайте мне знать.

Answer 3

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

Answer 4

Если у вас есть и боковая панель и MainContent плавали затем положить clear: both; в правилах для колонтитула должны означать, что всегда получает толкнул вниз - see this two column layout tutorial on 456 Berea Street для более подробной информации. Если ваша боковая панель абсолютно позиционирована, то вы можете быть немного веселее, here's a good resource for other layouts.

Answer 5

Существует также другой вариант - это кросс-браузер и без хаков - проверить equal height columns