CSS: расположение двух столбцов с каждым столбцом другого цвета - требуется высота жидкости

Итак, у меня есть расположение двух столбцов, и я не могу заставить высоту работать, как я хочу. У обоих есть контент, который должен расти, и заставить страницу прокручиваться - поэтому фиксированные и абсолютные значения отсутствуют. Однако при использовании относительных по этим столбцам (и их содержанию div) и минимальным процентам (т.е. минимум 100%, поэтому он всегда по крайней мере заполняет экран, если контент отсутствует). Однако он не работает. Минимальная высота не распознается, и я не получаю никакой высоты, если не будет контента.

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

Где угодно здесь скрипка: http://jsfiddle.net/hpAbc/80/

И некоторый пример кода из скрипки:

html, body{
 width:100%;
 height:100%
}

#container {
 width:100%;
 min-height:100%;
 padding-top:40px;
 position:relative;
 }

#nav {
 background:#222222;
 width:500px;
 height:40px;
 position:fixed;
 top:0;
 z-index:100;
}

 #content{
 background:#aaaaaa;
 width:500px;
 height:100%;
 position:relative;
 }

#main-content{
 background:#e1e1e1;
 width:300px;
 height:100%;
 float:left;
}

 #side-bar{
 background:#d1d1d1;
 width:200px;
 height:100%;
 float:left;
 }

.stuff{
 background:yellow;
 margin:10px; 
 width:50px;
 height:50px;
 position:relative;
 }
1 ответ

Вы можете использовать "display: table-row" и "display: table-cell", используя существующую разметку, чтобы получить эффект, который вы ищете.

#content{
 background:#aaaaaa;
 width:500px;
 height:100%;
 position:relative;
 display:table-row; 
 }

 #main-content{
 background:#e1e1e1;
 width:300px;
 height:100%;
 display:table-cell;
 }

 #side-bar{
 background:#d1d1d1;
 width:200px;
 height:100%;
 vertical-align:top;
 display:table-cell;
 }

Обновлена скрипка: http://jsfiddle.net/PQPrW/

Кроме того, если вы хотите изменить разметку, вы можете использовать вложенные div, чтобы получить тот же эффект. Существует статья, которая объясняет это здесь:

http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

licensed under cc by-sa 3.0 with attribution.