Ebeveyn maksimum/maksimum yüksekliğe sahip olduğunda CSS yüzde yüksekliği

Question

Bir öğede yüzde bir yükseklik kullandığınızda yüzde oranının ebeveynin yüzdesi olduğunu biliyorum. Bir çocuğun ebeveyninin% 40'ı olmasını istediğinizi varsayalım. Ebeveynin atanmış bir maksimum ve bir min yüksekliği vardır, ancak atanan açık bir yüksekliği yoktur. Örneğin:

<div id="container"> 
    <div id="one"> 
    <div id="two"></div> 
    </div> 
</div> 

css

#container{ 
    height: 500px; 
    background: yellow; 
} 
#one{ 
    background: red; 
    min-height:100px; 
    max-height: 50%; 
    padding: 10px; 
} 
#two{ 
    background: blue; 
    height: 40%; 
} 

Div iki görünmez. Bu max-height:50% arasındaki ebeveyni (div one) css değiştirdiğinizde: height:50% div iki görünür, çünkü açık olarak tanımlandığı için ebeveyninin yüksekliğinin ne olduğunu bilir. Sorum height

(min/max)-height değil kullanırken İşte orada iki görünmesini div yapmak için bir yoldur bir

Answer 1

Eğer yükseklik belirtmek yok veya yüzdelik dilimi tarafından yüksekliğini belirtmek ama onun parenet vermemek bir yükseklik belirtirseniz fiddle, blok öğesi içerik yüksekliğine yeniden boyutlandırılacaktır (bu durumda #two için 0px).

Longer Explain

Dolayısıyla, sadece min-height için, DOM yüksekliği yüksekliğini belirtmeden min-yükseklikten başlayacak çünkü yüksekliğini ayarlayın.

jsFiddle

#one{ 
    background: red; 
    min-height: 100px; 
    height: 100px; 
    max-height: 50%; 
    padding: 10px; 
} 

Answer 2

Kontrol şuna, bir küçük parça eksik. #container ve #two ile karşılaştırıldığında #one değerini #one ile karşılaştırmak istediğinizi varsayalım. #two'dan bir yükseklik elde etmek için # bir yükseklik ifadesine ihtiyacımız var. Buradaki hile, bir maksimum yükseklik, bir min-yükseklik ve elemanın yüksekliğini ayarlamak, böylece min ve maks.

bu css deneyin: Bu max-height tarafından kısıtlandığı için

<style> 
#container{ 
    height: 74vh; 
    background: yellow; 
} 
#one{ 
    background: red; 
    min-height:100px; 
    max-height: 50%; 
    height: 100%; 
    padding: 10px; 
} 
#two{ 
    background: blue; 
    height: 40%; 
} 
</style> 

yükseklik elde asla, ancak yüksekliği yüksekliği bildirmek olmadan: oto, bildirilmemiş olduğunu. Görüntüleyicinin boyutuna göre tüm öğeyi duyarlı hale getirmek için #container'ın yüksekliğini 74vh olarak ayarladım.