Как сверстать 2 колонки с разным фоном, неизвестным количеством контента и 100% высоты (минимум)?

Question

[Derp]

Привет.

Передо мной стоит задача: 2 колонки — сайдбар с фиксированной шириной слева и основная контентная часть справа от сайдбара, контентная часть должна занимать всю оставшуюся ширину страницы. Футер/шапка не нужны.

У фона сайдбара и контентной части различная цветная заливка.


В контентной части на различных страницах будет разное количество текста, где-то очень мало, где-то несколько экранов вниз.

Требуется добиться того чтоб при любом раскладе и сайдбар и контентная часть были:

1. Одинаковой высоты.

2. Занимали 100% высоты экрана (минимум если мало текста).

3. В контентную часть можно было добавить любое количество информации.

4. Работает в IE 6/7+


На данный момент я добился того чтоб при небольшом количестве текста в контентной части, 2 условия выполняются — i.imgur.com/J9Gt5.png, однако если добавить больше текста, то всё едет — i.imgur.com/KTSJi.png


Добавление 'overflow:hidden' частично решает проблему, но при большом количестве текста на странице он обрезается, а это недопустимо.


Код: pastebin.com/zXqzEJaP


Спасибо всем кто поможет.

Answer 1

[Андрей Кунцевич]

а вот та же идея, только через css display

Comments

[Андрей Кунцевич]

уже с вашим а не моим html кодом.

[Derp]

а старые IE (6/7) поддерживают display:table?

[Андрей Кунцевич]

по поводу поддержки чего бы то ни было, советую заглядывать сюда
цитата от туда:

Iternet Explorer до версии 7 включительно:

• поддержка значений table-footer-group и table-header-group происходит только для тегов <thead> и <tfoot>;
• для элементов <li> понимает значение block как list-item;
• значение inline-block применяется только для встроенных элементов, с блочными элементами работает некорректно.

Но, прекратите пинать труп!

[Андрей Кунцевич]

не туда посмотрел. нет не поддерживает. но фраза про труп остаётся в силе

Answer 2

[Николай Васильчук]

Вот статья по этой теме
А вот я сделал для вас пример
Пользуйтесь на здоровье

Comments

[Андрей Кунцевич]

тот же подход что и у меня. поддерживаю.

[Derp]

Cпасибо за ответ, но я уточнил – поддержка IE 6/7 обязательна. Я проверил в этих браузерах, к сожалению всё разъехалось.

[Николай Васильчук]

Как-то я видимо не заметил уточнения про IE.

[Derp]

Нет, в смысле я уточнил это у человека которому я помогаю с этой проблемой. Когда я создавал вопрос это ещё не было решено.

[Андрей Кунцевич]

Derp так используй мой первый вариант с изменённой на табличную вёрсткой

[Derp]

titulusdesiderio, да спасибо, я скорее всего на нём и остановлюсь.

Answer 3

[Андрей Буров]

www.dynamicdrive.com/style/layouts/category/C9/ оно?

Comments

[Derp]

Вроде не оно. На сайте примеры не занимают 100% высоты при небольшом количестве контента.

Answer 4

[lorndesign]

два дива, с обычной высотой в 100%
у второго пусть оверфлоу — авто

Comments

[Derp]

Тогда первый перестаёт прокручиваться.

Answer 5

[northbear]

Универсального решения независящего от количества текста в колонках нет.
Если количество текста в сайдбаре всегда меньше, чем в контентной колонке. То можно вложить контентный div во внутрь div'а сайдбара, зафиксировав ширину контентного дива и установив float: right;.

Или тривиальный вариант: Сделать двухцветный фон страницы (с background-repeat: repeat-y;), div колонок с прозрачным фоном и соответственное позиционирование каждой колонки на поле своего цвета… ) Колонки по факту будут не 100% процентов высотой, но визуально будет выглядеть так…

Comments

[Николай Васильчук]

Универсального решения независящего от количества текста в колонках нет.

Вы уверены?

[northbear]

Сами-то статью читали по вашей ссылке? Там вполне себе русским языком написано, что правильный метод для IE6/IE7 не работает… указанный в статье альтернативный способ ничем не отличается от моего тривиального варианта. В моем случае просто отсутствуют два в общем-то ненужных дива.
То как вы «для автора вопроса» сделали (height: 100%), предлагалось автору комментарием выше. Ему этот вариант не подошёл…

[Николай Васильчук]

1. Забудьте вы уже про IE6/7. Чем дольше их поддерживаете, тем дольше они существуют.
2. Да, вы предложили примерно то же, что и в статье.
3. Комментарий выше не подошел, потому что он не удовлетворял условиям автора. Моя реализация удовлетворяет всем условиям и работает как надо. Пример посмотрите хорошенько.

[northbear]

Вы не мне это говорите, а автору… Я-то с этим «чудом» вообще стараюсь не связываться. Но заказчика не всегда можно переубедить…

Answer 6

[Андрей Кунцевич]

Я конечно понимаю что табличная вёрстка это фуууу
но иногда проще и быстрее использовать её чем изголяться.
вот

Comments

[Андрей Кунцевич]

ширину урезал для наглядности (: если вдруг возникнут какие вопросы по этому поводу

[Андрей Кунцевич]

ширину тега P

Answer 7

[StyleT]

По моему вот что вам надо: metus.com.ua/index.php?route=product/category&path=20_26_59 Смотрите как оформлена левая и правая колонка сайта. Сам сталкивался с подобным, где то находил решение, но оно затерлось, осталась только реализация.

Answer 8

[Derp]

Всем спасибо за ответы, я временно беру таймаут — подожду что скажет человек для которого я это делаю.
Позже отпишусь какой в итоге вариант выбрали.

Answer 9

[yoyurec]

ковыряй блог trifler.ru — там у него много экспериментов на эту тему

Comments

[yoyurec]

trifler.ru/blogfloat.htm — там мнооого всего, выбирай нужный тебе