Apabila elemen induk menetapkan ketinggian min: 100%, elemen anak tidak akan mewarisi ketinggian.

Question

Saya menemui cara untuk menjadikan bekas div mengambil sekurang-kurangnya ketinggian penuh halaman dengan menetapkan tinggi min: 100%;. Walau bagaimanapun, apabila saya menambah div bersarang dan menetapkan height: 100%;, ia tidak sampai ke ketinggian bekas. Adakah terdapat sebarang cara untuk menyelesaikan masalah ini?

html, badan {
  ketinggian: 100%;
  margin: 0;
}

#containment {
  ketinggian min: 100%;
  latar belakang: merah jambu;
}

#containment-shadow-left {
  ketinggian: 100%;
  latar belakang: aqua;
}

<div id="containment">
  <div id="containment-shadow-left">
    Hai dunia!
  </div>
</div>

Answer 1

Tambah height: 1px dalam bekas induk. Berfungsi dalam Chrome, FF dan Safari.

Answer 2

Ini ialah pepijat webkit (chrome/safari) yang dilaporkan di mana unsur anak unsur induk dengan ketinggian minimum tidak boleh mewarisi atribut ketinggian: https://bugs.webkit.org/show_bug.cgi?id=26559

Nampaknya Firefox juga terjejas (tidak dapat menguji dalam IE buat masa ini)

Penyelesaian yang mungkin:

• Tambah kedudukan:relatif dalam #bendung
• Tambah kedudukan:mutlak dalam #bendung-bayang-kiri

Pepijat tidak muncul apabila elemen dalam mempunyai kedudukan mutlak.

Lihat http://jsfiddle.net/xrebB/

Diedit pada 10 April 2014

Memandangkan saya sedang mengusahakan projek yang benar-benar perlu mempunyai min-height elemen ibu bapa dan anak yang mewarisi ketinggian bekas, saya melakukan beberapa kajian lagi.

Pertama sekali: Saya tidak pasti lagi sama ada kelakuan penyemak imbas semasa sebenarnya adalah pepijat. Spesifikasi CSS2.1 berkata:

Jika saya menetapkan ketinggian min pada bekas, saya tidak dengan jelas menentukan ketinggiannya - jadi elemen saya sepatutnya mendapat autotinggi. Inilah yang dilakukan oleh Webkit - dan semua penyemak imbas lain.

Kedua, penyelesaian yang saya temui:

Jika saya menetapkan elemen bekas kepada display:table dan menggunakan height:inherit, ia berkelakuan sama seperti memberikannya display:table并使用height:inherit，它的行为与给它一个min-height为100%完全相同。而且 - 更重要的是 - 如果我将子元素设置为display:table-celldaripada 100%. Dan - yang lebih penting - jika saya menetapkan elemen anak kepada display:table-cell, ia akan mewarisi ketinggian elemen kontena dengan sempurna - sama ada 100% atau lebih.

CSS penuh:

html, body {
  height: 100%;
  margin: 0;
}

#container {
  background: green;
  display: table;
  height: inherit;
  width: 100%;
}

#content {
  background: red;
  display: table-cell;
}

Tag:

<div id="container">
  <div id="content">
      <p>content</p>
  </div>
</div>

Lihat http://jsfiddle.net/xrebB/54/.