<分区>
使用 Bootstrap ,我很难创建其父元素的 100% height
的 div。
我有 .row-fluid
div 和两个 .span
div。
第一个 .span9
有更多内容,然后第二个 .span3
有导航和下面的空白区域。我想用颜色填充那个空白空间。我希望一直延伸到 .span9
的内容到达的地方。
<分区>
使用 Bootstrap ,我很难创建其父元素的 100% height
的 div。
我有 .row-fluid
div 和两个 .span
div。
第一个 .span9
有更多内容,然后第二个 .span3
有导航和下面的空白区域。我想用颜色填充那个空白空间。我希望一直延伸到 .span9
的内容到达的地方。
最佳答案
这是一个 CSS 解决方案,基于为每一列添加大填充和同样大的负边距,然后将整行包装在一个 overflow hidden 的类中。它也适用于跨浏览器
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/ 看到它在工作
关于css - Bootstrap 。 div 100% 其父元素的高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14819425/