Html 拉伸子div高度以填充具有动态高度的父div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17900122/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Stretch child div height to fill parent that has dynamic height
提问by Khaled
As it can be seen in the following fiddle, I have two divs, contained in a parent divthat have stretched to contain the big div, my goal is to make those child divs equal in height.
正如在下面的小提琴中可以看到的，我有两个divs，包含在一个div已拉伸以包含大 div的父级中，我的目标是使这些孩子div的高度相等。
http://fiddle.jshell.net/y9bM4/
http://fiddle.jshell.net/y9bM4/
采纳答案by Mr_Green
The solution is to use display: table-cellto bring those elements inline instead of using display: inline-blockor float: left.
解决方案是使用display: table-cell将这些元素内联而不是使用display: inline-blockor 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>回答by Trong Lam Phan
回答by Ayan
Add the following CSS:
添加以下 CSS：
For the parent div:
对于父 div：
style="display: flex;"
For child div:
对于子div：
style="align-items: stretch;"
回答by Gelo K
https://www.youtube.com/watch?v=jV8B24rSN5o
https://www.youtube.com/watch?v=jV8B24rSN5o
I think you can use display as grid:
我认为您可以将显示用作网格：
.parent { display: grid };
回答by Levon Matevosyan
You can do it easily with a bit of jQuery
您可以使用一点 jQuery 轻松完成
$(document).ready(function(){
var parentHeight = $("#parentDiv").parent().height();
$("#childDiv").height(parentHeight);
});
