다음 바이올린에서 볼 수 있듯이 큰 div를 포함하도록 확장 div된 부모에 포함 된 두 개의 s 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>답변
s display: flex를 늘리는 데 사용 div:
div#container {
padding:20px;
background:#F1F1F1;
display: flex;
}
.content {
width:150px;
background:#ddd;
padding:10px;
margin-left: 10px;
}답변
다음 CSS를 추가하십시오.
상위 div의 경우 :
style="display: flex;"하위 div의 경우 :
style="align-items: stretch;"답변
답변
약간의 jQuery로 쉽게 할 수 있습니다.
$(document).ready(function(){
var parentHeight = $("#parentDiv").parent().height();
$("#childDiv").height(parentHeight);
});답변
