Anak di dalam orang tua dengan tinggi minimum: 100% tidak mewarisi tinggi

Saya menemukan cara untuk membuat wadah div untuk menempati setidaknya satu halaman penuh, dengan menetapkan min-height: 100%;. Namun, ketika saya menambahkan div bersarang dan mengatur height: 100%;, itu tidak meregang ke tinggi penampung. Apakah ada cara untuk memperbaikinya?

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

#containment {
  min-height: 100%;
  background: pink;
}

#containment-shadow-left {
  height: 100%;
  background: aqua;
}

<div id="containment">
  <div id="containment-shadow-left">
    Hello World!
  </div>
</div>

Ini adalah bug webkit (chrome / safari) yang dilaporkan, anak-anak dari orang tua dengan ketinggian minimum tidak dapat mewarisi properti height: https://bugs.webkit.org/show_bug.cgi?id=26559

Rupanya Firefox juga terpengaruh (tidak dapat menguji di IE saat ini)

Kemungkinan solusi:

• tambahkan posisi: relatif ke #containment
• tambahkan posisi: absolut ke # penahanan-bayangan-kiri

Bug tidak menunjukkan kapan elemen dalam memiliki posisi absolut.

Lihat http://jsfiddle.net/xrebB/

Edit pada 10 April 2014

Karena saat ini saya sedang mengerjakan proyek yang sangat saya butuhkan wadah induk min-height, dan elemen anak mewarisi ketinggian wadah, saya melakukan penelitian lebih lanjut.

Pertama: Saya tidak yakin lagi apakah perilaku browser saat ini benar-benar bug. Spesifikasi CSS2.1 mengatakan:

Persentase dihitung sehubungan dengan ketinggian blok berisi kotak yang dihasilkan. Jika ketinggian blok yang mengandung tidak ditentukan secara eksplisit (yaitu, itu tergantung pada tinggi konten), dan elemen ini tidak sepenuhnya diposisikan, nilai dihitung menjadi 'otomatis'.

Jika saya menempatkan ketinggian minimum pada wadah saya, saya tidak secara eksplisit menentukan ketinggiannya - jadi elemen saya harus mendapatkan autoketinggian. Dan itulah yang dilakukan oleh Webkit - dan semua peramban lainnya.

Kedua, solusi yang saya temukan:

Jika saya mengatur elemen kontainer saya display:tabledengan height:inherititu bertindak persis dengan cara yang sama seperti jika saya akan memberikannya min-height100%. Dan - yang lebih penting - jika saya mengatur elemen anak ke display:table-celldalamnya akan dengan sempurna mewarisi ketinggian elemen wadah - apakah itu 100% atau lebih.

CSS lengkap:

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

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

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

Markup:

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

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

Tambahkan height: 1pxke wadah induk. Bekerja di Chrome, FF, Safari.

pikir saya akan membagikan ini, karena saya tidak melihat ini di mana pun, dan itulah yang saya gunakan untuk memperbaiki solusi saya.

SOLUSI :min-height: inherit;

Saya memiliki orang tua dengan ketinggian minimum yang ditentukan, dan saya membutuhkan seorang anak untuk menjadi tinggi itu.

.parent {
  min-height: 300px;
  background-color: rgba(255,255,0,0.5); //yellow
}

.child {
  min-height: inherit;
  background-color: rgba(0,255,0,0.5); //blue
}

p {
  padding: 20px;
  color: red;
  font-family: sans-serif;
  font-weight: bold;
  text-align: center;
}

<div class="parent">
  <div class="child">
    <p>Yellow + Blue = Green :)</p>
  </div>
</div>

Dengan cara ini anak sekarang bertindak sebagai tinggi 100% dari tinggi minimum.

Saya harap beberapa orang menemukan ini berguna :)

Ini ditambahkan dalam komentar oleh @jackocnr tapi saya melewatkannya. Untuk browser modern, saya pikir ini adalah pendekatan terbaik.

Itu membuat elemen dalam mengisi seluruh wadah jika terlalu kecil, tetapi memperluas tinggi wadah jika terlalu besar.

#containment {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

#containment-shadow-left {
  flex: 1;
}

Solusi Kushagra Gour tidak bekerja (setidaknya di Chrome dan IE) dan menyelesaikan masalah asli tanpa harus menggunakan display: table;dan display: table-cell;. Lihat penyedot: http://plnkr.co/edit/ULEgY1FDCsk8yiRTfOWU

Pengaturan min-height: 100%; height: 1px;pada div luar menyebabkan ketinggian aktualnya minimal 100%, sesuai kebutuhan. Ini juga memungkinkan div bagian dalam untuk mewarisi ketinggian dengan benar.

Selain jawaban yang ada, ada juga unit viewport vhuntuk digunakan. Cuplikan sederhana di bawah ini. Tentu saja itu dapat digunakan bersama dengan calc()juga, misalnya min-height: calc(100vh - 200px);ketika header halaman dan footer memiliki 200pxketinggian bersama.

body {
  margin: 0;
}

.child {
  min-height: 100vh;
  background: pink;
}

<div class="parent">
  <div class="child"></div>
</div>

Saya tidak percaya ini adalah bug pada browser. Semua berperilaku dengan cara yang sama - yaitu, setelah Anda berhenti menentukan ketinggian eksplisit, ketinggian minimum pada dasarnya adalah "langkah terakhir".

Tampaknya persis seperti yang disarankan oleh spesifikasi CSS 2.1: http://www.w3.org/TR/CSS2/visudet.html#the-height-property

Persentase dihitung sehubungan dengan ketinggian blok berisi kotak yang dihasilkan. Jika ketinggian blok yang mengandung tidak ditentukan secara eksplisit (yaitu, itu tergantung pada tinggi konten), dan elemen ini tidak sepenuhnya diposisikan, nilai dihitung menjadi 'otomatis'.

Oleh karena itu, karena min-heightinduk tidak memiliki heightset properti eksplisit , defaultnya adalah otomatis.

Ada beberapa cara untuk mengatasi hal ini dengan menggunakan display: table-cell, atau gaya yang lebih baru seperti flexbox, jika itu memungkinkan untuk peramban audiens target Anda. Anda juga dapat menumbangkan ini dalam situasi tertentu dengan menggunakan topdan bottomproperti pada elemen bagian dalam yang benar-benar diposisikan, yang memberi Anda ketinggian 100% tanpa menyebutkannya.

Meskipun display: flex;telah disarankan di sini, pertimbangkan untuk menggunakan display: grid;sekarang karena didukung secara luas . Secara default, satu-satunya anak kisi akan sepenuhnya mengisi induknya.

html, body {
  height: 100%;
  margin: 0;
  padding: 0; /* Don't forget Safari */
}

#containment {
  display: grid;
  min-height: 100%;
  background: pink;
}

#containment-shadow-left {
  background: aqua;
}

Untuk googler:

Pemecahan masalah jquery ini membuat #containment mendapatkan ketinggian secara otomatis (oleh, height: auto), lalu mendapatkan ketinggian aktual yang ditetapkan sebagai nilai piksel.

<script type="text/javascript">
<!--
    $(function () {

        // workaround for webkit-bug http://stackoverflow.com/a/8468131/348841

        var rz = function () {
            $('#containment')
            .css('height', 'auto')
            .css('height', $('#containment').height() + 'px');
        };

        $(window).resize(function () {
            rz();
        });

        rz();

    })
-->
</script>

Cara terbaik untuk mencapai ini saat ini adalah menggunakan display: flex;. Namun Anda mungkin mengalami masalah ketika mencoba untuk mendukung IE11. Menurut https://caniuse.com menggunakan flexbox:

IE 11 tidak secara vertikal menyelaraskan item dengan benar ketika min-height digunakan

Solusi yang kompatibel dengan Internet Explorer

Solusinya adalah untuk digunakan display: table;pada orang tua dan display: table-row;anak dengan keduanya height: 100%;sebagai pengganti min-height: 100%;.

Sebagian besar solusi yang tercantum di sini menggunakan display: table, table-rowdan / atau table-cell, tetapi mereka tidak mereplikasi perilaku yang sama dengan min-height: 100%;, yaitu:

• Mewarisi tinggi induk yang dihitung (sebagai lawan dari mewarisi heightpropertinya);
• Biarkan tinggi orangtua melebihi min-height;

Saat menggunakan solusi ini, perilakunya sama dan properti min-heighttidak diperlukan yang memungkinkan untuk mengatasi bug.

Penjelasan

Alasan mengapa ia bekerja adalah karena, tidak seperti kebanyakan elemen, elemen menggunakan display: tabledan table-rowakan selalu setinggi konten mereka. Ini membuat heightproperti mereka berperilaku serupa dengan min-height.

Solusi dalam aksi

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

#containment {
  display: table;
  height: 100%;
  background: pink;
  width: 100%;
}

#containment-shadow-left {
  display: table-row;
  height: 100%;
  background: aqua;
}

#content {
  padding: 15px;
}

#demo {
  display: none;
  background-color: red;
  height: 200px;
}

#demo-checkbox:checked ~ #demo {
  display: block;
}

<div id="containment">
  <div id="containment-shadow-left">
    <div id="content">
      <input id="demo-checkbox" type="checkbox">
      <label for="demo-checkbox">Click here for overflow demo</label>
      <div id="demo">This is taller than #containment</div>
    </div>
  </div>
</div>

Solusi JS lainnya, yang mudah dan dapat digunakan untuk menghindari solusi markup / hacky yang tidak mudah hanya CSS atau.

function minHeight(elm, percent) {
  var windowHeight = isNaN(window.innerHeight) ? 
                     window.clientHeight : window.innerHeight;
  var height = windowHeight * percent / 100;
  elm.style.minHeight = height + 'px';
}

W / jQuery:

function minHeight($elm, percent) {
  var windowHeight = $(window).height();
  var height = windowHeight * percent / 100;
  $elm.css('min-height', height + 'px');
}

Arahan sudut:

myModule.directive('minHeight', ['$window', function($window) {
  return {
    restrict: 'A',
    link: function(scope, elm, attrs) {
      var windowHeight = isNaN($window.innerHeight) ? 
               $window.clientHeight : $window.innerHeight;
      var height = windowHeight * attrs.minHeight / 100;
      elm.css('min-height', height + 'px');
    }
  };
}]);

Untuk digunakan seperti ini:

<div>
  <!-- height auto here -->
  <div min-height="100">
    <!-- This guy is at least 100% of window height but grows if needed -->
  </div>
</div>

Ini biasanya bekerja untuk saya:

.parent {
  min-height: 100px;
  background-color: green;
  display: flex;
}
.child {
  height: inherit;
  width: 100%;
  background-color: red;
}

<!DOCTYPE html>
<html>
  <body>
    <div class="parent">
      <div class="child">
      </div>
    </div>
  </body>
</html>

 Run code snippetHide results
Expand snippet

Hanya untuk menyelesaikan masalah ini, saya menemukan solusi yang tidak dieksplorasi di sini menggunakan posisi tetap.

Tidak Ada Overflow

html, body, .wrapper, .parent, .child {
  position: fixed;
  top: 0; 
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0;
  padding: 0;
  height: 100%;
}

.child {
  overflow: auto;
  background: gray;
}

.height-50 {
  height: 50%;
  width: 5em;
  margin: 10px auto;
  background: cyan;
}

<div class="wrapper">
  <div class="parent">
    <div class="child">
      
      <div class="height-50"></div>
      
    </div>
  </div>
</div>

Dengan Overflow

html, body, .wrapper, .parent, .child {
  position: fixed;
  top: 0; 
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0;
  padding: 0;
  height: 100%;
}

.child {
  overflow: auto;
  background: gray;
}

.height-150 {
  height: 150%;
  width: 5em;
  margin: 10px auto;
  background: cyan;
}

<div class="wrapper">
  <div class="parent">
    <div class="child">
      
      <div class="height-150"></div>
      
    </div>
  </div>
</div>

Inilah yang berhasil bagi saya dengan tinggi berdasarkan persentase dan orang tua masih bertambah sesuai dengan tinggi badan anak-anak. Berfungsi dengan baik di Firefox, Chrome dan Safari.

.parent {
  position: relative;
  min-height: 100%;
}

.child {
  min-height: 100vh;
}

<div class="parent">
    <div class="child"></div>
  </div>

setelah mencoba untuk kita! chrome mengerti bahwa saya ingin elemen anak menjadi 100% tinggi ketika saya mengatur nilai tampilan ke blok inline. pengaturan btw float akan menyebabkannya.

display:inline-block

memperbarui

ini tidak bekerja. solusinya adalah dengan mendapatkan parentnode offsetheight dan gunakan di bagian halaman dengan javascript.

<script>
    SomedivElement = document.getElementById('mydiv');
    SomedivElement.style.height = String(nvleft.parentNode.offsetHeight) + 'px';    
</script>