引导程序。 div 100% 其父元素的高度 [重复]

Posted 2023-03-06

【中文标题】引导程序。 div 100% 其父元素的高度 [重复]

【英文标题】：bootstrap. div 100% height of its parent element [duplicate]

【发布时间】：2013-01-26 23:37:55

【问题描述】：

使用引导程序，我很难创建 div 100% height 的父元素。

我有.row-fluid div 和两个.span div。 第一个.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/看到它的工作原理

【讨论】：

这项工作的完美伴侣。我会给你投票，但我是 15 岁以下的新人。谢谢。

不客气，我很高兴它有帮助

不幸的是，这似乎不适用于边框。

@Nullius，这里有一个可能适合您的井或圆角的变体：jsfiddle.net/panchroma/4Pyhj

我自己摆弄了一下，已经开始工作了。谢谢，无论如何 +1！