Come si può vedere nel seguente violino, ho due div s, contenuti in un genitore div che si sono allungati per contenere il grande div, il mio obiettivo è quello di rendere quelli bambino div s uguale in altezza.Altezza figlio div altezza per riempire il genitore che ha altezza dinamica
http://fiddle.jshell.net/y9bM4/
La soluzione è quella di utilizzare display: table-cell per portare questi elementi in linea invece di utilizzare display: inline-block o 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>Questo non funziona se l'elemento genitore è una cella di tabella. –
Usa display: flex per allungare i 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;
}
Lo si può fare facilmente con un po 'di jQuery
$(document).ready(function(){
var parentHeight = $("#parentDiv").parent().height();
$("#childDiv").height(parentHeight);
});
Anche se una volta ridimensionata la finestra del browser, questa si interromperà, mentre quelle CSS funzioneranno ancora. – SharpC
Questo è così grave. -1 –
Aggiungere il seguente CSS:
per il div genitore:
style="display: flex;"
Per div bambino:
style="align-items: stretch;"
che lo ha risolto per me! –
controllo quelle domande: 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-height-of-browser-window, http://stackoverflow.com/questions/13609531/make-an-div-100-height-css – mrzmyr
@MikeHometchko ce ne sono molti su CSS ma non su CSS3. Penso che sia così. –
@Mr_Green le differenze a livello fondamentale tra "CSS" e CSS3 sono banali quindi non vedo il problema. Questo è un problema molto comune che è stato chiesto e ha risposto alla morte. –