div 不占用父 div 的高度（带/引导）答案

【问题标题】：Div not taking height of parent div (w/ bootstrap)div 不占用父 div 的高度（带/引导）
【发布时间】：2015-02-18 16:50:52
【问题描述】：

首先我要说我知道这个问题被问了很多，但我看到的答案似乎都对我没有用。

基本上，我在一个较大的 div 中有一些 div。他们会有动态文本，所以我不知道每个会有多少行。问题是我似乎无法让 div 将自己的大小调整到父母的高度。我希望列 div 占据行 div 的整个高度（基本上，我希望蓝色部分填充条之间的所有空间）。

HTML：

<div class="container">
    <div class="row divOne">
        <div class="col-xs-3 divTwo">Some Text</div>
        <div class="col-xs-3">
            Some text that could wrap to multiple lines
        </div>
    </div>
    <div class="row divOne">
        <div class="col-xs-3 divTwo">Different Text</div>
        <div class="col-xs-3 divThree">
            With some more text
        </div>
    </div>
</div>

CSS：

.divOne
{
    border-top:10px solid black;
}

.divTwo
{
    background-color: #32649b;
    height:100%;
    color:white;
}

jsfiddle:

现在，我从这个问题的其他版本中学到的是

float:left 可能搞砸了
如果定义了父级的高度，height:100% 不起作用
position:relative 可能对父母有帮助

浮动的问题是我正在使用引导程序，这就是浮动的来源，所以我真的不想搞砸。

我无法真正定义父级高度，因为它会根据子级而动态变化。

我也尝试过使用 position:relative 对父级和 absolute 对子级，但这似乎变得非常棘手。我也猜这行不通，因为我正在使用引导程序。不过，我可能只是错过了一些东西。我承认 CSS 不是最棒的。

我不知道我遇到这些问题是因为我正在使用引导程序，还是因为我现在只是个白痴。

其他一些东西似乎对事物产生了影响：这些列在小屏幕和大屏幕上的布局会有所不同。我实际上想要一些类似于 col-xs-12 col-md-3 的东西。

【问题讨论】：

其实我不明白你想要完成什么？如果您希望每行都是容器高度的 100%，为什么要使用 2 行引导程序？
抱歉，我觉得我说得不够清楚。基本上，我将行内的列作为行的大小，所以我希望蓝色背景部分成为行的大小。
看看这里stackoverflow.com/questions/19695784/…。我认为接受的答案就是您要寻找的答案
ooh ok 现在我明白了，抱歉回答不好。
@Hemadeus 没问题，我应该澄清更多。 tmg，到目前为止，这似乎正在做我想要的，我会试一试。谢谢！

标签： html css twitter-bootstrap

【解决方案1】：

简短的回答是，在引导框架的约束下，您无法真正实现这一点。有很多文章解释了为什么div 元素不能伸展到其容器的高度，以及如何解决这个问题。我最喜欢的解决方案之一是Faux Columns。

但是，让我们更有创意。

我想出了一些可能适用于您的场景的方法，但需要对您的标记进行一些更改。这是一个使用display: table 包装引导网格的解决方案。

http://jsfiddle.net/Wexcode/13Lfqmjo/

HTML：

<div class="table-container">
    <div class="table-row divOne">
        <div class="col-xs-3 divTwo">Some Text</div>
        <div class="col-xs-3">
            Some text that could wrap to multiple lines
        </div>
        <div class="col-xs-6"></div>
    </div>
</div>

CSS：

.table-container {
    margin: 0 -15px;
}

.table-row {
    display: table;
    width: 100%;
}

.table-row [class^="col"] {
    display: table-cell;
    padding: 0 15px;
    float: none;
}

请注意，要使此解决方案起作用，您必须包含足够的 col 元素以将其拉伸到所有 12 列（请参阅我添加了一个空的 .col-xs-6 div）。

【讨论】：

我认为这是另一种解决方案，因为我希望将列堆叠在较小的屏幕上（实际上，我将它们都设置为 col-xs-12 col -md-3 或类似的东西）。我会尝试调整一些东西，但我有点担心 bootstrap 会妨碍我获得我想要的东西。
您可以添加媒体查询，类似于 bootstrap 对其列元素进行媒体查询的方式...将 display: table-cell 替换为 display: table-row 并且实际上是相同的。

【解决方案2】：

你可以添加

display:flex;

到 divOne ，并且会按照您的意愿行事。在 bootstrap 4 'row' 类中将其应用于 div，但在早期版本中，如果您希望出现这种行为，则需要手动添加。

【讨论】：

【解决方案3】：

给.divOne 一个display: flex 并从.divTwo 中删除height: 100%：

.divOne
{
    border-top:10px solid black;
    display: flex;
}

.divTwo
{
    background-color: #32649b;
    /*height:100%;*/
    color:white;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row divOne">
        <div class="col-xs-3 divTwo">Some Text</div>
        <div class="col-xs-3">
            Some text that could wrap to multiple lines
        </div>
    </div>
    <div class="row divOne">
        <div class="col-xs-3 divTwo">Different Text</div>
        <div class="col-xs-3 divThree">
            With some more text
        </div>
    </div>
</div>

【讨论】：