CSS 100% высота во внутренних столбцах

Question

ОБНОВЛЕНИЕ: http://jsfiddle.net/dSkJb/19/

Чтобы уточнить, нижний колонтитул должен быть внизу страницы, а страница должна всегда иметь высоту 100%, поэтому средний ряд должен корректироваться соответствующим образом. Ничто не должно перекрывать нижний колонтитул, и нижний колонтитул не должен перекрывать что-либо. По сути, если у вас есть таблица из двух строк с высотой 100%, вы легко справитесь с этим.

---

Это проблема, div с высотой 100%, который находится внутри div с 100%, и некоторый текст сжимается.

http://jsfiddle.net/sandraqu/dSkJb/8/

Есть ли способ сделать высоту внутреннего div относительно высоты содержащего div?

Оригинальный пост ниже

---

Я пытаюсь, чтобы две внутренние колонки имели высоту 100% и не мешали липкому нижнему колонтитулу. Пока у меня есть липкий нижний колонтитул, работающий по отношению к основному контейнеру, но я пытаюсь сопоставить высоту #content, # col1 и # col2 с высотой #container без потери липкого нижнего колонтитула.

Различные статьи предлагают использовать высоту: авто; высота: 100%; и min-height (для ie6), но я нахожу height: auto; вмешиваться во внутренние высоты div. Есть предложения и для позиции: относительная, плавающая, дисплей: встроенный. Слишком много вариантов?

Предложения, пожалуйста :: http://jsfiddle.net/sandraqu/kDCTR/

Answer 1

Кросс-браузерное решение для IE 8+.В теории, однако, вы можете использовать любой метод для получения столбцов в середине.Я просто использовал display: table; и display: table-cell;.Но для работы div не обязательно должен быть display: table;, поэтому вы можете использовать float трюки, или искусственные столбцы, или Святой Грааль, или все, что вы хотите, и сделать его совместимым с IE 6+.Я просто ленив, чтобы реализовать все это прямо сейчас.Основная цель достигнута, я позволю вам поработать над спецификой.:)

Answer 2

Немного неясно, как вы хотите, чтобы потенциальное переполнение работало в центральной области контента, и сколько лет браузеру вы хотите приспособить. Для IE8 + я считаю, что это соответствует вашим потребностям: http://jsfiddle.net/dSkJb/51/. Вот очень короткий пример контента: http://jsfiddle.net/dSkJb/52/.

Может быть с какой-то серьезной целевой настройкой IE7 можно было приспособить (я потратил слишком много времени, пытаясь заставить его работать, подошел несколько раз, но не смог этого сделать, поэтому я сдался ). IE6 определенно НЕ будет работать с этим.

Answer 3

Во-первых, я не уверен, что вы подразумеваете под «липким нижним колонтитулом» в данном случае.Липкий нижний колонтитул обычно является чем-то, что застревает на месте, в то время как остальная часть страницы прокручивается.Тем не менее, ваш пример, кажется, «прикрепляет» нижний колонтитул к нижней части контейнера, а не к нижней части области просмотра.Это правильное поведение?

Во-вторых, в зависимости от того, как вы хотите с ним работать, есть несколько опций для столбцов "100% высоты":

1) Fake It

Используйте фоновое изображение, которое выглядит как столбцы, которые вы хотите.Повторите это вдоль body, container ИЛИ content, в зависимости от того, как вы хотите его стилизовать.Пожалуйста, смотрите A List Apart - Faux Columns или Google "CSS Faux Columns" для получения дополнительной информации.

Это лучшее решение, если вам нужен настоящий липкий нижний колонтитул.

2) Расположите свои элементы

Добавьте position: relative к вашему content div и position: absolute; height: 100%; к столбцу, который будет иметь меньше содержимого.Столбец, в котором будет больше содержимого, будет увеличивать высоту элемента content.Также обратите внимание, что вы можете захотеть добавить поле к столбцу с большим содержанием, чтобы отодвинуть его от поля с меньшим содержанием.

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

См. Мой jsFiddle для получения более подробной информации об этой технике.