Html Div不取父Div的高度（带引导）

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

基本上，我在一个较大的div中有一些div。它们会有动态文本，所以我不知道每个div有多少行。问题是，我似乎无法使div的大小与家长的高度相匹配。我希望列div占据行div的整个高度（基本上，我希望蓝色部分填充条之间的所有空间）

HTML:

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

• 浮子：左边可能把事情搞砸了
• 高度：如果定义了父级的高度，则100%不起作用
• 位置：相对可能对父级有帮助

浮点数的问题是我使用的是引导，这就是浮点数的来源，所以我真的不想弄乱它

我不能真正定义父级高度，因为它将基于子级进行动态定义

我还试着摆弄一下位置：父母是相对的，孩子是绝对的，但这似乎真的很奇怪。我也猜这不会起作用，因为我使用的是引导。不过，我可能只是错过了一些东西。我承认我并不是CSS的佼佼者

我不知道我有这些问题是因为我在使用bootstrap，还是因为我现在只是个白痴

---

还有一件事似乎给事情带来了麻烦：这些栏目在小屏幕和大屏幕上的布局会有所不同。实际上，我想要一些类似于col-xs-12 col-md-3的东西来解决这些问题。

简单的回答是，在引导框架的约束下，您无法真正实现这一点。有很多文章解释了为什么

div

元素不能伸展到容器的高度，以及如何解决这个问题。我最喜欢的解决办法之一是

但是，让我们更具创造性

我提出了一些可能适用于您的场景的方法，但需要对您的标记进行一些更改。下面是一个用

display:table

包装引导网格的解决方案

HTML:

请注意，要使此解决方案起作用，您必须包含足够的

col

元素来拉伸所有12列（请参阅我添加了一个空的

.col-xs-6

div）。

您可以添加

display:flex;

她会像你想的那样表演。

---

在bootstrap 4中，“row”类将此应用于div，但在早期版本中，如果您希望出现此类行为，则需要手动添加。

给出

.divOne

a

display:flex

并从

中删除
高度：100%
：


.divOne
{
边框顶部：10px纯黑；
显示器：flex；
}
第二名
{
背景色：#32649b；
/*身高：100%*/
颜色：白色；
}

一些文本
一些可以换行的文本
不同文本
再加上一些文字
事实上，我不明白你想要实现什么？如果你想让每一行都达到容器高度的100%，为什么要使用两行引导？对不起，我想我还不够清楚。基本上，我将行中的列设置为行的大小，所以我希望蓝色背景部分为行的大小。我认为你想要的答案是被接受的哦，好吧，现在我明白了，很抱歉回答不好。@Hemadeus没问题，我应该澄清更多。tmg，到目前为止，这似乎是我想要的，我会尝试一下。谢谢我认为这是另一个解决方案，因为我希望将列堆叠在一个更小的屏幕上（实际上，我会将它们分别命名为col-xs-12 col-md-3或类似的名称）。我将尝试调整一些东西，但我有点担心bootstrap会在很大程度上阻碍我获得所需内容。您可以添加媒体查询，类似于bootstrap对其列元素进行媒体查询的方式。。。将
display:table cell
替换为
display:table row
，它实际上是相同的。
.divOne
{
    border-top:10px solid black;
}

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

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

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

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

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

display:flex;