拉伸子div高度以填充具有dynamic高度的父级
从下面的小提琴中可以看出，我有两个div ，包含在父div ，可以包含大div，我的目标是使这些div高度相等。
http://fiddle.jshell.net/y9bM4/
解决方法是使用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>
使用display: flex来展开你的div ：
div#container { padding:20px; background:#F1F1F1; display: flex; } .content { width:150px; background:#ddd; padding:10px; display:inline-block; vertical-align:top; margin-left: 10px; } .text { font-family: 12px Tahoma, Geneva, sans-serif; color:#555; }
的jsfiddle
解决这个问题的最佳select是使用display: flex; 与属性 。 这与@TrongLamPhan的答案类似，但他没有使用align-items: stretch;align-items: stretch 。
编辑：当您启用flexbox与display: flex; ， align-items的默认值是stretch ，所以你不需要添加属性align-items: stretch因为这是默认值。 去投票给别人的答案。
CSS细分：
- 在
parent-div设置displayflex。 这将设置parent-div的显示模式为flexbox，从而启用 -
align-items属性被使用。将此属性设置为stretch以使child-div伸展匹配。
CSS技巧有一个相当不错的Flexbox教程 。 我强烈build议在2017年学习flexbox，因为它是一个非常强大的布局工具，并且在所有主stream浏览器中都处于稳定状态 。
* { font-family: sans-serif; } .parent-div { margin: 0.5em; padding: 0.5em; background-color: #ddd; display: flex; align-items: stretch; } .child-div { flex: 1; /*this property is only here to make each child the same width*/ margin: 0.5em; padding: 0.5em; background-color: #eee; }
<div class="parent-div"> <div class="child-div">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div> <div class="child-div">This child div should be the same size!</div> </div>
添加下面的CSS：
对于父div：
style="display: flex;"
对于小孩div：
style="align-items: stretch;"
你可以用一些jQuery轻松完成
$(document).ready(function(){ var parentHeight = $("#parentDiv").parent().height(); $("#childDiv").height(parentHeight); });
