引导.div其父元素的100%高度

Question

使用bootstrap我在创建div 100%height的父元素时遇到了困难.

我有.row-fluiddiv和两个.spandiv.首先.span9有更多的内容,然后第二个.span3有导航和空白空间.我想用颜色填充那个空白区域.我希望在.span9达到内容的地方尽可能地延伸.

Answer 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/看到它的工作原理