css - Bootstrap 。 div 100% 其父元素的高度

标签 css twitter-bootstrap

<分区>

使用 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/

相关文章:

jquery - 如何在悬停在菜单项上时显示子菜单项

javascript - jQuery/HTML5 选择并设置父项和所有子项的样式

html - 需要使用 Bootstrap 将文本放入 2 列?

javascript - Bootstrap 导航栏在滚动一定距离后淡出

javascript - 使用 javascript 删除 'this' 单击的列表元素

html - 环绕位置 : relative

html - 所有浏览器的圆 Angular 解决方案?

html - Box-sizing 属性无法按预期与 Bootstrap 列一起使用

html - 在移动设备上,如何垂直堆叠我的 Bootstrap 导航选项卡?

html - 语义 'talking' 带标题的 CSS 导航