Regangkan tinggi div turunan untuk mengisi induk yang memiliki tinggi dinamis

96

Seperti yang dapat dilihat pada biola berikut, saya memiliki dua divs, yang terdapat di dalam induk divyang direntangkan untuk memuat div besar, tujuan saya adalah membuat anak divitu sama tingginya.

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

css html

— Khaled
sumber

2

periksa pertanyaan-pertanyaan itu: stackoverflow.com/questions/3049783/… , stackoverflow.com/questions/1575141/… , stackoverflow.com/questions/13609531/make-an-div-100-height-css

— mrzmyr

@MikeHometchko ada banyak di CSS tapi tidak di CSS3. Aku pikir begitu.

— Mr_Green

1

@Mr_Green perbedaan pada tingkat fundamental antara "CSS" dan CSS3 itu sepele jadi saya tidak melihat masalahnya. Ini adalah masalah yang sangat umum yang telah ditanyakan dan dijawab sampai mati.

— Mike H.

1

@MikeHometchko periksa solusi saya. Saya yakin tidak ada yang menjawab hal yang sama sebelumnya.

— Mr_Green

48

Solusinya adalah menggunakan display: table-celluntuk membawa elemen tersebut sebaris daripada menggunakan display: inline-blockatau 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>

Luaskan cuplikan

Bekerja Fiddle

— Mr_Green
sumber

Ini tidak berfungsi jika elemen induk adalah sel tabel.

— Tomáš Zato - Kembalikan Monica

55

Gunakan display: flexuntuk meregangkan tubuh Anda div:

div#container {
    padding:20px;
    background:#F1F1F1;
    display: flex;
}

.content {
    width:150px;
    background:#ddd;
    padding:10px;
    margin-left: 10px;
}

JSFIDDLE

— Trong Lam Phan
sumber

19

Tambahkan CSS berikut:

Untuk div induk:

style="display: flex;"

Untuk div anak:

style="align-items: stretch;"

— Ayan
sumber

Saya perlu menambahkan stretchanak-anak agar fleksibel bekerja untuk saya.

— BadHorsie

4

https://www.youtube.com/watch?v=jV8B24rSN5o

Saya pikir Anda dapat menggunakan tampilan sebagai kisi:

.parent { display: grid };

— Gelo K
sumber

Apakah Anda menguji jawaban Anda menggunakan kode poster asli yang sama?

— Mark Stewart

Ini berfungsi dan tidak memerlukan CSS apa pun pada anak. Itu karena sel CSS Grid akan memiliki autobaris dan sel secara default. Ini sebenarnya bekerja cukup baik dengan IE jika Anda menggunakan display: -ms-griduntuk menghindari beberapa flexbugs, selama Anda hanya memiliki satu anak.

— ShortFuse

-6

Anda dapat melakukannya dengan mudah dengan sedikit jQuery

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

— Levon Matevosyan
sumber

3

Meskipun setelah jendela browser diubah ukurannya, ini akan rusak, sedangkan CSS masih akan berfungsi.

— SharpC