Высота 100% Колонка обрезки объектов

Question

У меня есть сайт, который имеет три столбца, и каждый столбец должен быть 100% высоты внешней обертки (т.е. страницы).

Я поставил HTML, тело и все столбцы в:

height: 100%; 

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

Я создал jsfiddle пример здесь: http://jsfiddle.net/rTXt6/

Я уверен, что его простое решение, но его сводит меня с ума, и я надеюсь, что кто-то может помочь.

Редактировать: Чтобы быть немного яснее, высота: 100%, кажется, устанавливает высоту на 100% высоты окна браузера, она не изменяет размер, чтобы учитывать его содержимое, которое может длиться дольше.

Answer 1

Я нашел чистый HTML/CSS исправление и обновление jsfiddle, чтобы показать, что here

В основном я просто вложен каждый DIV в предыдущем до последнего (rightcol), и с учетом каждого ребенка div - нижняя процентная ширина.

<div>LeftCol 
    <div>CenterCol 
     <div>RightCol 
     </div> 
    </div> 
</div> 

Спасибо за вход каждого как обычно :)

Answer 2

С помощью css-поплавков вы должны использовать clearfix как this one.

Я просто добавил в код:

Html

<div class="cf"></div> 

CSS

.cf:before, 
.cf:after { 
    content: " "; /* 1 */ 
    display: table; /* 2 */ 
} 

.cf:after { 
    clear: both; 
} 

.cf { 
    *zoom: 1; 
} 

Clearfix из сильфона ссылки.

Смотрите обновленный fiddle

Answer 3

Потратив немного времени, кажется, я нашел решение. Установите min-height:100% вместо height:100% на все ваши внутренние контейнеры вашего #container div. Updated fiddle