Question

我首先要说的是我知道这个问题已被问过很多，但我看到的答案似乎都不适合我。

基本上，我在一个更大的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：左边可能搞砸了
身高：如果定义了父母的身高，则100％不起作用
职位：亲属可能对父母有帮助

浮动的问题我使用bootstrap，以及浮动来自哪里，所以我真的不想搞砸这一点。

我无法真正定义父级身高，因为它会根据孩子的情况而动态。

我也试过搞乱位置：父亲的亲戚和孩子的绝对，但这似乎变得非常棘手。我也猜测这不会起作用，因为我使用了bootstrap。但是，我可能只是遗漏了一些东西。我承认CSS不是最好的。

我不知道我是否遇到过这些问题，因为我使用的是bootstrap，或者因为我现在只是个白痴。

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

Answer 1

简短的回答是，你无法在bootstrap框架的约束下实现这一点。有很多文章可以解释为什么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）。

Answer 2

您可以添加

display:flex;

到divOne，将按照您想要的方式运行。在bootstrap 4'row'类中，此操作将在div上应用，但在早期版本中，如果您期望出现这种行为，则需要手动添加。

Answer 3

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

.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>

不取父div的高度（带/ bootstrap）

jsfiddle:

3 个答案: