Css 使子div的高度与父div相同，但不带位置：绝对

代码如下：

 <div id="content" class="row shadow" >

    <div id="test2" class="col-lg-4">
      <p>dsfdsfasdfdasfdsafdsfasdf</p>
    </div>

    <div id="test3" class="col-lg-4" style="">
      <p>breerwwerewrqerewrqewqrwqer</p>
   </div>

    <div id="test4" class="col-lg-4">
      <h2>Directlinks</h2>
      <p>BRRRRRRRRRRRRRRRRRRRRRRRRRRRR</p>
    </div>

 </div>

到id#test2和#test3

问题是，div不希望使用height:100%从固定到内容的父div获取height

如果我给一个test*一个绝对位置，它会取父div的最大高度，但我不能将所有子div设置为绝对，而不破坏屏幕上的自动修复以重新调整大小。

然后将其设置为“位置：相对”；或者 “位置：绝对；显示：块；”

然后将其设置为“位置：相对”；或

---

“位置：绝对；显示：块；”

我添加了以下代码：

padding bottom:1000px

在每个列的底部添加1000px的填充

页边距底部：-1000px

通过将每列的高度降低1000px，基本上再次删除此填充。现在，每列的高度至少为1000px（填充+内容）

通过给出

#content

溢出：隐藏

，您无法在每列底部看到额外的1000px，因此这些列的高度似乎都相等（请尝试删除

溢出：隐藏

），以查看它们是否仍然不同

媒体查询（

@media（最小宽度：1200px）

）确保仅在列相邻显示时应用这些附加规则

---

工作示例：

我将以下代码添加到：

padding bottom:1000px

在每个列的底部添加1000px的填充

页边距底部：-1000px

通过将每列的高度降低1000px，基本上再次删除此填充。现在，每列的高度至少为1000px（填充+内容）

通过给出

#content

溢出：隐藏

，您无法在每列底部看到额外的1000px，因此这些列的高度似乎都相等（请尝试删除

溢出：隐藏

），以查看它们是否仍然不同

媒体查询（

@media（最小宽度：1200px）

）确保仅在列相邻显示时应用这些附加规则

---

工作示例：

它不起作用的原因是父级没有定义的高度。百分比值基于父对象的显式高度（或宽度），如果让它自由流动，则不会发生任何事情

通常，在使用这样的基于列的布局时，可以使用display:table和table单元格来实现所需的功能

CSS:

HTML:

文本

文本

文本

文本
文本

文本

它不起作用的原因是父级没有定义的高度。百分比值基于父对象的显式高度（或宽度），如果让它自由流动，则不会发生任何事情

通常，在使用这样的基于列的布局时，可以使用display:table和table单元格来实现所需的功能

CSS:

HTML:

文本

文本

文本

文本
文本

文本

所以你想达到这样的目标？不，像>如果你放大它，你可以看到与家长不一样高的寄宿线检查这一条：太棒了，谢谢！你能解释一下你是如何/为什么/以及你做了什么改变的吗？那么你正在努力实现这样的目标吗？不，像>如果你放大它，你可以看到与家长不一样高的寄宿线检查这个：太棒了，谢谢！你能解释一下你是如何改变的吗？“没有位置：绝对”，因为这会破坏屏幕的自动修复功能。是的，只是相对定位，然后子项将使用其父div的高度。我将内容设置为相对位置，但子div不会取其父div的高度“无位置：绝对“因为这会破坏屏幕功能的自动修复。是的，只是相对定位，然后子项将使用其父div的高度……我将#content设置为位置：相对，但子div不会采用其父div的高度。这真的很聪明，但没有优雅的艺术？谢谢你的解释！还有其他几种方法可以达到相同的效果，请查看此页面以获取概述：。但是我使用的方法是最容易添加到Bootstrap列实现中的。这真的很聪明，但是没有优雅的艺术？谢谢你的解释！还有其他几种方法可以达到相同的效果，请查看此页面以获取概述：。但我使用的方法是最容易添加到引导列实现中的方法。

@media (min-width: 1200px) {
    #content { overflow: hidden; }
    #test2, #test3, #test4 {
        margin-bottom: -1000px;
        padding-bottom: 1000px;
    }
}

.outer {
   display: table;
}
.col {
   display: table-cell;
   border: 1px solid red;
}

<div class="outer">
    <div class="col">
        text<br/>
        text<br/>
        text<br/> 
    </div>
    <div class="col">
        text
    </div>
    <div class="col">
        text<br/>
        text<br/>
    </div>
</div>