Самозагрузки. div 100% высота его родительского элемента

С bootstrap у меня возникают трудности с созданием div 100% height его родительского элемента.

У меня есть .row-fluid div и два .span divs в нем. Первый .span9 имеет больше контента, затем второй .span3 имеет навигацию и пустое пространство. Я хочу заполнить это пустое пространство цветом. Я хочу, чтобы все это растянулось, когда доходит содержимое .span9.

Ответы

Ответ 1

Здесь используется CSS-решение, основанное на добавлении большого заполнения и одинаково большого отрицательного поля для каждого столбца, а затем завершение всей строки в классе с скрытым переполнением. Он также хорошо работает в кросс-браузере.

CSS

.col{
    margin-bottom: -99999px;
    padding-bottom: 99999px;
    background-color:#ffc;
}

.col-wrap{  
    overflow: hidden;   
}

HTML

<div class="container">
    <div class="row-fluid col-wrap">
        <div class="span9 col">

            ... span content ...

        </div><!-- end span 9-->

        <div class="span3 col">

            ... span content ...

        </div><!-- end span 3-->
    </div><!-- end row-fluid -->
</div>

Вы можете видеть, что он работает на http://jsfiddle.net/panchroma/y3BhT/