Burada HTML

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

Ve burada CSS:

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

Chrome geliştirici araçları ile incelemeye göre, iç div 0px yüksekliği oluyor.

Nasıl üst div yüksekliği 0 olması için zorlayabilir miyim?

#outer içeriği alan yüksekliği için, ve #inner O yüksekliği tabanı var, hem de elemanları konumlandırılmış olun.

Daha fazla detay için spec ** 26, ama aslında, #inner #outer #outeryükseklik görmezden gerekir'nın yüksekliği ** 11 . bulunabilir ^em>sürece#outer konumlandırılmış. Sonra #inner yükseklik 0, olacaksürece#inner kendisi konumlandırılmış.

<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... ... konumlandırma #inner bazen float ayarı yok sayılır, bu yüzden size ihtiyacımız seçin genişliği #inner açıkça ve eklemek doldurma #outer sahte metin kaydırma şüpheleniyorum istiyorum. Örneğin, aşağıda, #outer doldurma #inner 3 genişliği. Uygun (olarak tüm amacımız #inner yükseklik 100%) gerek yok metin kaydırma altında #inner, böyle de olur bak gibi #inner satışa çıkardı.

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

Amacınız hakkında çok fazla yanlış varsayımlara dayalı olarak önceki cevabımı sildim.