将子元素的高度拉伸以填满具有动态高度的父元素

Question

如下示例代码所示，我有两个div，它们包含在一个父div中，以适应大div的大小，我的目标是使这些子div的高度相等。

http://fiddle.jshell.net/y9bM4/

- Khaled

---

请检查以下编程���关内容：https://dev59.com/t3A75IYBdhLWcg3w49UR，https://dev59.com/JHI_5IYBdhLWcg3wAd82，https://dev59.com/smYr5IYBdhLWcg3whKit - e382df99a7950919789725ceeec126

@MikeHometchko，关于CSS的文章很多，但是关于CSS3的就不是那么多了。我这么认为。 - Mr_Green

@Mr_Green 在基本层面上，“CSS”和“CSS3”的区别微不足道，所以我不认为这是个问题。这是一个非常普遍的问题，已经被问过并回答得很透彻了。 - Mike H.

@MikeHometchko，请检查我的解决方案。我确定没有人之前回答过相同的问题。 - Mr_Green

Answer 1

使用 display: flex 来拉伸你的 div 元素：

div#container {
    padding:20px;
    background:#F1F1F1;
    display: flex;
}

.content {
    width:150px;
    background:#ddd;
    padding:10px;
    margin-left: 10px;
}

JSFIDDLE

- Trong Lam Phan

Answer 2

解决方案是使用display: table-cell将这些元素变为行内元素，而不是使用display: inline-block或float: left。

div#container {
  padding: 20px;
  background: #F1F1F1
}
.content {
  width: 150px;
  background: #ddd;
  padding: 10px;
  display: table-cell;
  vertical-align: top;
}
.text {
  font-family: 12px Tahoma, Geneva, sans-serif;
  color: #555;
}

<div id="container">
  <div class="content">
    <h1>Title 1</h1>

    <div class="text">Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text.
      <br>Sample Text. Sample Text. Sample Text.
      <br>Sample Text.
      <br>
    </div>
  </div>
  <div class="content">
    <h1>Title 2</h1>

    <div class="text">Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text.</div>
  </div>
</div>

可运行的示例代码

- Mr_Green

---

如果父元素是表格单元格，则此方法无效。 - Tomáš Zato

Answer 3

添加以下 CSS：

对于父级 div：

style="display: flex;"

对于子 div：

style="align-items: stretch;"

- Ayan

---

我需要在子元素上添加 stretch 属性，才能让 flex 对我起作用。 - BadHorsie

这对我来说是有效的，但对于位于伸展元素内部的 display: grid，我必须添加 height: 100% 参数。网格默认情况下也包含动态高度。 - Falcon

Answer 4

我认为您可以使用网格显示：

```css display: grid; ```

请参考此视频教程： https://www.youtube.com/watch?v=jV8B24rSN5o

.parent { display: grid };

- HelloGello

---

你是否使用原帖作者相同的代码测试了你的答案？ - Mark Stewart

它可以工作，而且不需要在子元素上使用任何CSS。这是因为CSS Grid单元格默认情况下将具有“auto”行和单元格。如果您使用display：-ms-grid来避免一些flexbugs，并且只有一个子元素，则它实际上可以与IE很好地配合使用。 - ShortFuse

Answer 5

如果你需要用元素填满空间，将display:flex添加到父元素，并将align-items: stretch;添加到子元素，然后还需要添加justify-content: space-between。

- Ashutosh Yadav

---

目前的回答写得不清楚。请编辑以添加更多详细信息，帮助他人理解这如何回答所提出的问题。您可以在帮助中心找到有关如何撰写良好回答的更多信息。 - Community

Answer 6

你可以用一点jQuery轻松实现它

$(document).ready(function(){
  var parentHeight = $("#parentDiv").parent().height();
  $("#childDiv").height(parentHeight);
});

- Levon Matevosyan

---

尽管一旦调整浏览器窗口大小就会破坏此功能，而 CSS 功能则仍然有效。 - SharpC