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

小开

最佳答案

The solution is to use display: table-cell to bring those elements inline instead of using display: inline-block or 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

小开

使用 display: flex来拉伸你的 div:

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


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

JSFIDDLE

小开

You can do it easily with a bit of jQuery

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

小开

添加以下 CSS:

For the parent div:

style="display: flex;"

对于子 div:

style="align-items: stretch;"

小开

Https://www.youtube.com/watch?v=jv8b24rsn5o

我认为你可以用显示器作为网格:

.parent { display: grid };