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

由于在以下小提琴中可以看到，我有两个div s，包含在父亲div中，这些父母已包含大div，我的目标是使这些小孩div s高度相等。拉伸子div高度以填充具有动态高度的父母

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

2013-07-27 Khaled

检查这些问题：http://stackoverflow.com/questions/3049783/how-to-make-a-floated-div-100-height-of-its-parent，http://stackoverflow.com/questions/157514 1 /浏览器窗口中进行-DIV-100-高度的-，http://stackoverflow.com/questions/13609531/make-an-div-100-height-css – mrzmyr

@MikeHometchko有很多关于CSS，但不是CSS3。我想是这样。 –

@Mr_Green在“CSS”和CSS3之间的基本级别差异是微不足道的，所以我没有看到问题。这是一个非常常见的问题，已经被问及应对死亡。 –

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

Working Fiddle

来源

2013-11-04 13:44:09

但是，如果父元素是表格单元，则这不起作用。 –

使用display: flex伸展你的div S：

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

来源

2014-08-12 15:31:27

-1

你可以用一点jQuery的

的

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

来源

2016-08-25 19:10:48

尽管一旦浏览器窗口被调整大小，这将会中断，而CSS的仍将工作。 – SharpC

这太重了。 -1 –

做很容易添加以下CSS：

父DIV：

style="display: flex;"

对于孩子的div：

style="align-items: stretch;"

来源

2016-12-03 13:10:52 Ayan

为我修好了！ –

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

回答

相关问题