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

94

从下面的小提琴中可以看出，我有两个divs，它们包含在一个父级中div，并已拉伸到包含大div，我的目标是使那些孩子div的身高相等。

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

css html

— 哈立德
source

2

检查这些问题：stackoverflow.com/questions/3049783/...，stackoverflow.com/questions/1575141/...，stackoverflow.com/questions/13609531/make-an-div-100-height-css

— mrzmyr

@MikeHometchko在CSS上有很多，但在CSS3上却没有。我认同。

— Mr_Green 2013年

1

@Mr_Green“ CSS”和CSS3在根本上的区别很小，因此我看不到这个问题。这是一个非常普遍的问题，已经被问到并死了。

— Mike H.

1

@MikeHometchko检查我的解决方案。我敢肯定，以前没有人回答过同样的问题。

— Mr_Green 2013年

47

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

展开摘要

工作小提琴

— 格林先生
source

如果父元素是表单元格，则此方法不起作用。

— 托马什Zato -恢复莫妮卡

54

使用display: flex伸展你divS：

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

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

JSFIDDLE

— 通林潘
source

18

添加以下CSS：

对于父div：

style="display: flex;"

对于儿童div：

style="align-items: stretch;"

— 阿yan
source

我需要增加stretch孩子的弹性，以便为我工作。

— BadHorsie

4

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

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

.parent { display: grid };

— 盖洛
source

您是否使用原始海报的相同代码测试了答案？

— 马克·斯图尔特

它可以正常工作，并且在子级上不需要任何CSS。这是因为auto默认情况下，CSS网格单元将具有行和单元。如果您display: -ms-grid避免生一些flexbug，只要您只有一个孩子，它实际上就可以很好地与IE配合使用。

— ShortFuse

-6

您可以使用jQuery轻松完成此操作

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

— 列文·马特沃索扬（Levon Matevosyan）
source

3

尽管一旦调整了浏览器窗口的大小，它将中断，而CSS窗口仍将起作用。

— SharpC