Min. Yükseklikte ebeveynin içindeki çocuk:% 100 miras almıyor

Div kapsayıcısını ayarlayarak bir sayfanın en az yüksekliğini kaplayacak şekilde yapmanın bir yolunu buldum min-height: 100%;. Ancak, iç içe bir div ekleyip ayarladığımda height: 100%;, kabın yüksekliğine uzanmaz. Bunu düzeltmenin bir yolu var mı?

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>

Bu, bildirilen bir webkit (krom / safari) hatasıdır, en az yüksekliğe sahip ebeveynlerin çocukları height özelliğini devralamaz: https://bugs.webkit.org/show_bug.cgi?id=26559

Görünüşe göre Firefox da etkileniyor (şu anda IE'de test edilemiyor)

Olası geçici çözüm:

• konum ekle: #containment'e göre
• konum ekle: # çevreleme-gölge-sola mutlak

Hata, iç elemanın mutlak konumlandırmaya sahip olduğunu göstermez.

Bkz. Http://jsfiddle.net/xrebB/

10 Nisan 2014'te Düzenle

Şu anda gerçekten ana konteynırlara min-heightve konteynerin yüksekliğini miras alan alt öğelere ihtiyacım olan bir proje üzerinde çalıştığım için biraz daha araştırma yaptım.

Birincisi: Artık mevcut tarayıcı davranışının gerçekten bir hata olup olmadığından emin değilim. CSS2.1 özellikleri şunları söylüyor:

Yüzde, üretilen kutunun içerdiği bloğun yüksekliğine göre hesaplanır. Kapsayıcı bloğun yüksekliği açıkça belirtilmezse (yani içerik yüksekliğine bağlıdır) ve bu öğe tam olarak konumlandırılmazsa, değer 'otomatik' olarak hesaplanır.

Konteynırımın üzerine bir minimum yükseklik koyarsam , yüksekliğini açıkça belirtmiyorum - bu yüzden elemanım bir autoyükseklik almalı . Webkit ve diğer tüm tarayıcılar da aynen bunu yapıyor.

İkincisi, bulduğum geçici çözüm:

Konteyner öğemi onunla display:tablebirlikte ayarlarsam, height:inherittam olarak min-height% 100 veririm gibi davranır . Ve - daha da önemlisi - alt öğeyi buna ayarlarsam display:table-cell, konteyner öğesinin yüksekliğini mükemmel bir şekilde devralır -% 100 veya daha fazla olsun.

Tam CSS:

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

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

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

İşaretleme:

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

Bkz. Http://jsfiddle.net/xrebB/54/ .

height: 1pxÜst konteynere ekleyin . Chrome, FF, Safari'de çalışır.

Bunu hiçbir yerde görmediğim için paylaşacağımı düşündüm ve benim çözümümü düzeltmek için kullandım.

ÇÖZÜM :min-height: inherit;

Min yüksekliği belirtilen bir ebeveyni vardı ve bu boyda olması için bir çocuğa ihtiyacım vardı.

.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>

Bu şekilde çocuk min-boyunun% 100'ü kadar yükseklik görevi görür.

Umarım bazı insanlar bunu faydalı bulur :)

Bu @jackocnr tarafından bir yorumda eklendi ama ben kaçırdım. Modern tarayıcılar için bunun en iyi yaklaşım olduğunu düşünüyorum.

Çok küçükse iç elemanın tüm kabı doldurmasını sağlar, ancak çok büyükse kabın yüksekliğini arttırır.

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

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

Kushagra gour çözümü (en azından Chrome ve IE) çalışır ve kullanmak zorunda kalmadan orijinal sorunu çözer display: table;ve display: table-cell;. Dalma makinesine bakın: http://plnkr.co/edit/ULEgY1FDCsk8yiRTfOWU

min-height: 100%; height: 1px;Dış div üzerinde ayarlama , gerçek yüksekliğinin gerektiği gibi en az% 100 olmasına neden olur. Ayrıca iç div'in yüksekliği doğru şekilde miras almasını sağlar.

Mevcut cevaplara ek olarak, vhkullanılacak görüş alanı birimleri de bulunmaktadır. Aşağıdaki basit snippet. Elbette calc(), örneğin min-height: calc(100vh - 200px);sayfa üstbilgisi ve altbilgisi 200pxbirlikte yüksekliğe sahip olduğunda da birlikte kullanılabilir.

body {
  margin: 0;
}

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

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

Bunun tarayıcılarda bir hata olduğuna inanmıyorum. Hepsi aynı şekilde davranır - yani, açık yükseklikleri belirtmeyi bıraktığınızda, minimum yükseklik temelde bir "son adım" dır.

Görünüşe göre CSS 2.1 spesifikasyonunun önerdiği gibi: http://www.w3.org/TR/CSS2/visudet.html#the-height-property

Yüzde, üretilen kutunun içerdiği bloğun yüksekliğine göre hesaplanır. Kapsayıcı bloğun yüksekliği açıkça belirtilmezse (yani içerik yüksekliğine bağlıdır) ve bu öğe tam olarak konumlandırılmazsa, değer 'otomatik' olarak hesaplanır.

Bu nedenle, min-heightebeveynin açık bir özelliği olmadığı içinheight özellik ayarlanmadığından, varsayılan olarak otomatiktir.

display: table-cellHedeflenen kitlenizin tarayıcıları için bu mümkünse veya flexbox gibi daha yeni stiller kullanmanın bazı yolları vardır . Belirli durumlarda, kesinlikle konumlandırılmamış% 100 yükseklik sağlayan topve bottomkesinlikle konumlandırılmış bir iç elemandaki ve özelliklerini kullanarak bunu değiştirebilirsiniz.

display: flex;Burada önerilmiş olmasına rağmen , display: grid;şimdi yaygın olarak desteklendiğini kullanmayı düşünün . Varsayılan olarak, bir ızgaranın tek alt öğesi üst öğesini tamamen dolduracaktır.

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;
}

Google çalışanları için:

Bu jquery-geçici çözümü #containment'in otomatik olarak bir yükseklik almasını sağlar (yükseklik: otomatik olarak), ardından gerçek yüksekliği piksel değeri olarak atar.

<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>

Günümüzde bunu başarmanın en iyi yolu kullanmaktır display: flex;. Ancak IE11'i desteklemeye çalışırken bir sorunla karşılaşabilirsiniz. Göre https://caniuse.com flexbox'a kullanarak:

IE 11, minimum yükseklik kullanıldığında öğeleri dikey olarak doğru hizalamaz

Internet Explorer uyumlu çözüm

Çözüm display: table;ebeveynin ve display: table-row;çocuğun her ikisinin de height: 100%;yerine kullanılabilir.min-height: 100%; .

Çözümlerin çoğu burada kullanmak sıralanan display: table, table-rowve / veya table-cell, fakat onlar aynı davranışı çoğaltmak yok min-height: 100%;olan:

• Ebeveynin hesaplanan yüksekliğini miras almak ( height mülkünü );
• Ebeveynin yüksekliğini aşmasına izin verin min-height;

Bu çözümü kullanırken, davranış aynıdır ve min-heighthataya neden olan özelliğe gerek yoktur.

açıklama

Çalışmasının nedeni, çoğu öğeden farklı olarak, display: tablevetable-row her zaman içerikleri kadar uzun olacaktır. Bu, heightmallarının benzer şekilde davranmasını sağlar min-height.

Uygulamada çözüm

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>

Kolay olan ve sadece kolay olmayan bir CSS veya ekstra işaretleme / hacky çözümünden kaçınmak için kullanılabilecek başka bir JS çözümü.

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');
}

Açısal yönerge:

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');
    }
  };
}]);

Bu şekilde kullanılacak:

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

Bu genellikle benim için işe yarar:

.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

Sadece bu konuyu tamamlamak için, Sabit konum kullanarak burada keşfedilmemiş bir çözüm buldum .

Taşma Yok

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>

Taşma ile

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>

Yüzdeye dayalı yükseklik ve ebeveynlerin çocuk boyuna göre hala büyürken bu benim için işe yarar. Firefox, Chrome ve Safari'de iyi çalışır.

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

.child {
  min-height: 100vh;
}

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

bizim için denedikten sonra! chrome, görüntüleme değerini satır içi bloğa ayarlarken alt öğenin% 100 yükseklikte olmasını istediğimi anlar. btw float ayarı buna neden olur.

display:inline-block

Güncelleme

bu çalışmıyor. çözüm, üst düğüm ofset yüksekliğini elde etmek ve javascript ile sayfanın ve sayfasında kullanmaktır.

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