Question

使用bootstrap，我很难创建其父元素的div 100％height。

我有.row-fluid div和两个.span div。首先.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/

看到它正常工作

引导。 div其父元素的100％高度

1 个答案: