Yüzen bir div ebeveyninin% 100 yüksekliğinde nasıl yapılır?

İşte HTML:

<div id="outer">
    <div id="inner"></div>
    Test
</div>

Ve işte CSS:

#inner {
  float: left;
  height: 100%;
}

Chrome geliştirici araçlarını inceledikten sonra, iç div 0 piksel yüksekliğe ulaşıyor.

Ana divin yüksekliğinin% 100'ü olmaya nasıl zorlayabilirim?

İçin #outeryüksekliğinin içeriğine göre ve var olan #innertabanı bu üzerindeki yüksekliği, kesinlikle yerleştirilmiş iki kişi oldu.

Daha fazla detay için spec bulunabilir css yükseklik özelliği , ama aslında, #innergörmezden gerekir #outereğer yüksekliği #outerbireyin yüksekliği auto, sürece #outer kesinlikle konumlandırılmıştır. Daha sonra #inneryükseklik, 0 olur sürece #inner kendisi kesinlikle konumlandırılır.

<style>
    #outer {
        position:absolute; 
        height:auto; width:200px; 
        border: 1px solid red; 
    }
    #inner {
        position:absolute; 
        height:100%; 
        width:20px; 
        border: 1px solid black; 
    }
</style>

<div id='outer'>
    <div id='inner'>
    </div>
    text
</div>

Ancak ... #innerKesinlikle konumlandırarak , bir floatayar yok sayılır, bu nedenle #inneraçıkça bir genişlik seçmeniz ve #outeristediğinizden şüphelendiğim metin sargısını takmak için dolgu eklemeniz gerekir . Örneğin, aşağıda, dolgusu +3 #outergenişliğindedir #inner. Uygun olarak (tüm nokta #inner% 100'e kadar yükseklik elde etmek olduğu için ) altına metin sarmaya gerek yoktur #inner, bu yüzden bu #inneryüzer gibi görünecektir .

<style>
    #outer2{
        padding-left: 23px;
        position:absolute; 
        height:auto; 
        width:200px; 
        border: 1px solid red; 
    }
    #inner2{
        left:0;
        position:absolute; 
        height:100%; 
        width:20px; 
        border: 1px solid black; 
   }
</style>

<div id='outer2'>
    <div id='inner2'>
    </div>
    text
</div>

Hedefinizle ilgili çok fazla yanlış varsayımlara dayandığı için önceki cevabımı sildim.

Ebeveyn için:

display: flex;

Bazı önekler eklemelisiniz http://css-tricks.com/using-flexbox/

Edit: Sadece dezavantajı her zamanki gibi IE, IE9 flex desteklemiyor. http://caniuse.com/flexbox

Düzenleme 2: @toddsby belirtildiği gibi, hizalama ürün ebeveyn içindir ve varsayılan değer aslında streç . Çocuk için farklı bir değer istiyorsanız, align-self özelliği vardır.

Düzenleme 3: jsFiddle: https://jsfiddle.net/bv71tms5/2/

Aslında, üst öğe konumlandırıldığı sürece çocuğun yüksekliğini% 100 olarak ayarlayabilirsiniz. Yani, ebeveynin kesinlikle konumlandırılmasını istemiyorsanız. Açıklayayım:

<style>
    #outer2 {
        padding-left: 23px;
        position: relative; 
        height:auto; 
        width:200px; 
        border: 1px solid red; 
    }
    #inner2 {
        left:0;
        position:absolute; 
        height:100%; 
        width:20px; 
        border: 1px solid black; 
    }
</style>

<div id='outer2'>
    <div id='inner2'>
    </div>
</div>

Internet Explorer'ın IE8'den önceki sürümlerini desteklemeniz gerekmediği sürece, bunu display: table-cellgerçekleştirmek için kullanabilirsiniz :

HTML:

<div class="outer">
    <div class="inner">
        <p>Menu or Whatever</p>
    </div>
    <div class="inner">
        <p>Page contents...</p>
    </div>
</div>

CSS:

.inner {
    display: table-cell;
}

Bu, .innersınıftaki her öğeyi üst öğesinin tam yüksekliğini işgal etmeye zorlar .

Bir örnek yaptımSorununuzu çözen .

Bir sarıcı yapmalı, yüzdürmeli, sonra div'inizi mutlak olarak konumlandırmalı ve% 100 yükseklik vermelisiniz.

HTML

<div class="container">
    <div class="left">"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." </div>
  <div class="right-wrapper">
    <div class="right">"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." </div>
  </div>
  <div class="clear">&nbsp;</div>
</div>

CSS:

.container {
    width: 100%;
    position:relative;
}
.left {
    width: 50%;
    background-color: rgba(0, 0, 255, 0.6);
    float: left;
}
.right-wrapper {
    width: 48%;
    float: left;
}
.right {
    height: 100%;
    position: absolute;
}

Açıklama: .right div kesinlikle konumlandırılmıştır. Bu, genişliği ve yüksekliği, üst ve sol konumlarının, birinci ebeveyn div temel alınarak tamamen veya yalnızca genişlik veya yükseklik özellikleri CSS'de açıkça belirtilmişse göreceli olarak konumlandırılarak hesaplanacağı anlamına gelir; açıklık beyan edilmezse, bu özellikler ana kapsayıcıya (.right-wrapper) göre hesaplanır.

Bu nedenle, DIV'nin% 100 yüksekliği .container son yüksekliğine göre hesaplanacak ve .right konumunun son konumu ana konteynere göre hesaplanacaktır.

İşte bunu başarmanın daha basit bir yolu:

1. Üç öğenin kapsayıcı (#outer) ekranını ayarlayın: tablo
2. Ve öğeleri kendileri (#inner) görüntüsünü ayarlayın: tablo hücresi
3. Yüzenleri çıkarın.
4. Başarı.

#outer{
    display: table;
}
#inner {
    display: table-cell;
    float: none;
}

Floated div'daki @Itay sayesinde % 100 yükseklik

Biraz jQuery kullanmaya hazırsanız, cevap basit!

$(function() {
    $('.parent').find('.child').css('height', $('.parent').innerHeight());
});

Bu, tek bir elemanı üst öğesinin% 100 yüksekliğinde bir tarafa yüzmek için iyi çalışır, normalde etrafına sarılacak diğer yüzen elemanlar bir tarafa tutulur.

Umarım bu jQuery hayranlarına yardımcı olur.

Bu, eşit yüksekliğe sahip ızgara sistemi için bir kod örneğidir.

#outer{
width: 100%;
margin-top: 1rem;
display: flex;
height:auto;
}

Dış div için CSS yukarıda

#inner{
width: 20%;
float: left;
border: 1px solid;
}

Yukarıda iç div

Umarım bu sana yardımcı olur

Bu bana yardımcı oldu.

#outer {
    position:relative;
}
#inner {
    position:absolute;
    top:0;
    left:0px;
    right:0px;
    height:100%;
}

Sağa ve sola değiştir: tercih edilen #inner genişliğini ayarlamak için.

Aynı yüksekliğe sahip birden fazla alt öğeye ihtiyacınız olduğunda benzer bir durum flexbox ile çözülebilir:

https://css-tricks.com/using-flexbox/

Set display: flex;ebeveyn için ve flex: 1;alt öğeleri için, hepsi aynı yüksekliğe sahip olacaktır.

Deneyin

#outer{overflow: auto;}

daha fazla seçenek göster: Kayan öğelerin ebeveynlerinin daralmasını nasıl önlersiniz?