Wie in der folgenden Geige gesehen werden kann, habe ich zwei div s, in einem Elternteil div enthalten, die das große div gestreckt haben, mein Ziel ist es, diese zu machen Kind div s gleich in der Höhe.Stretch Kind div Höhe um Eltern zu füllen, die dynamische Höhe hat
http://fiddle.jshell.net/y9bM4/
Die Lösung ist display: table-cell zu verwenden, um diese Elemente zu bringen inline statt display: inline-block oder float: left verwenden.
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>Dies funktioniert jedoch nicht, wenn das übergeordnete Element eine Tabellenzelle ist. –
Verwenden display: flex Ihre div s strecken:
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;
}
Sie können es einfach mit ein bisschen jQuery
$(document).ready(function(){
var parentHeight = $("#parentDiv").parent().height();
$("#childDiv").height(parentHeight);
});
Obwohl die Größe des Browserfensters einmal geändert wird, wird dies brechen, während die CSS-Dateien immer noch funktionieren. – SharpC
Das ist so eklig. -1 –
Fügen Sie den folgenden CSS:
Für die Eltern div:
style="display: flex;"
Für Kind div:
style="align-items: stretch;"
das reparierte es für mich! –
Scheck diese Fragen: http://stackoverflow.com/questions/3049783/how-to-make-a-floated-div-100-height-of-its-parent, http://stackoverflow.com/questions/157514 1/make-div-100-Höhe-von-Browser-Fenster, http://stackoverflow.com/questions/13609531/make-an-div-100-height-css – mrzmyr
@MikeHometchko gibt es viele auf CSS, aber nicht auf CSS3. Ich denke schon. –
@Mr_Green die Unterschiede auf einer grundlegenden Ebene zwischen "CSS" und CSS3 sind trivial, so sehe ich das Problem nicht. Dies ist ein sehr häufiges Problem, das zu Tode gestellt und beantwortet wurde. –