拉伸子 div 高度以填充具有动态高度的父级答案

【问题标题】：Stretch child div height to fill parent that has dynamic height拉伸子 div 高度以填充具有动态高度的父级
【发布时间】：2013-07-27 19:57:10
【问题描述】：

从下面的小提琴中可以看出，我有两个 divs，包含在一个父 div 中，它们已经延伸到包含大 div，我的目标是让那些孩子 divs 在高度。

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

【问题讨论】：

检查这些问题：stackoverflow.com/questions/3049783/…、stackoverflow.com/questions/1575141/…、stackoverflow.com/questions/13609531/make-an-div-100-height-css
@MikeHometchko CSS 上有很多，但 CSS3 上没有。我想是的。
@Mr_Green “CSS”和 CSS3 在基本层面上的差异是微不足道的，所以我没有看到问题。这是一个非常普遍的问题，已经被问到死了。
@MikeHometchko 检查我的解决方案。我敢肯定以前没有人回答过同样的问题。

标签： css html

【解决方案1】：

解决方案是使用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>

Working Fiddle

【讨论】：

如果父元素是表格单元格，这不起作用。

【解决方案2】：

使用display: flex 拉伸您的divs：

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

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

JSFIDDLE

【讨论】：

【解决方案3】：

你可以用一点 jQuery 轻松做到这一点

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

【讨论】：

虽然一旦浏览器窗口被调整大小，它会中断，而 CSS 仍然可以工作。

【解决方案4】：

添加以下 CSS：

对于父 div：

style="display: flex;"

对于子 div：

style="align-items: stretch;"

【讨论】：

我需要在孩子身上添加stretch 以便 flex 为我工作。
这对我有用，但对于在拉伸元素内的display: grid，我必须添加height: 100% 参数。默认情况下，网格也包含动态高度。

【解决方案5】：

https://www.youtube.com/watch?v=jV8B24rSN5o

我认为你可以使用 display as grid:

.parent { display: grid };

【讨论】：

您是否使用原始发布者的相同代码测试您的答案？
它可以工作并且不需要在孩子身上使用任何 CSS。这是因为默认情况下 CSS Grid 单元格将具有 auto 行和单元格。如果你使用display: -ms-grid 来避免一些 flexbugs，它实际上可以很好地与 IE 配合使用，只要你只有一个孩子。