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

Привет.

Передо мной стоит задача: 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


Спасибо всем кто поможет.
  • Вопрос задан
  • 5350 просмотров
Пригласить эксперта
Ответы на вопрос 9
titulusdesiderio
@titulusdesiderio
IT-специалист
а вот та же идея, только через css display
Ответ написан
lorndesign
@lorndesign
два дива, с обычной высотой в 100%
у второго пусть оверфлоу — авто
Ответ написан
@northbear
Универсального решения независящего от количества текста в колонках нет.
Если количество текста в сайдбаре всегда меньше, чем в контентной колонке. То можно вложить контентный div во внутрь div'а сайдбара, зафиксировав ширину контентного дива и установив float: right;.

Или тривиальный вариант: Сделать двухцветный фон страницы (с background-repeat: repeat-y;), div колонок с прозрачным фоном и соответственное позиционирование каждой колонки на поле своего цвета… ) Колонки по факту будут не 100% процентов высотой, но визуально будет выглядеть так…
Ответ написан
titulusdesiderio
@titulusdesiderio
IT-специалист
Я конечно понимаю что табличная вёрстка это фуууу
но иногда проще и быстрее использовать её чем изголяться.
вот
Ответ написан
StyleT
@StyleT
По моему вот что вам надо: metus.com.ua/index.php?route=product/category&path=20_26_59 Смотрите как оформлена левая и правая колонка сайта. Сам сталкивался с подобным, где то находил решение, но оно затерлось, осталась только реализация.
Ответ написан
Derp
@Derp Автор вопроса
Всем спасибо за ответы, я временно беру таймаут — подожду что скажет человек для которого я это делаю.
Позже отпишусь какой в итоге вариант выбрали.
Ответ написан
yoyurec
@yoyurec
ковыряй блог trifler.ru — там у него много экспериментов на эту тему
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы