CSS prozentuale Höhe, wenn das übergeordnete Element die minimale/maximale Höhe hat

Question

Ich weiß, dass der prozentuale Anteil des übergeordneten Elements Prozent beträgt, wenn Sie eine prozentuale Höhe für ein Element verwenden. Nehmen wir an, Sie möchten, dass ein Kind 40% seines Elternteils ist. Dem übergeordneten Element ist eine maximale und eine minimale Höhe zugewiesen, es ist jedoch keine explizite Höhe zugewiesen. Zum Beispiel:

<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 zwei nicht angezeigt. Wenn Sie die CSS seiner Eltern (div one) von dieser max-height:50% zu dieser ändern: height:50% div zwei wird angezeigt, weil es weiß, was die Höhe seiner Eltern ist, weil es explizit definiert ist. Meine Frage gibt es eine Möglichkeit div zwei erscheinen zu lassen, während mit (min/max)-height und nicht height

ist hier ein fiddle

Answer 1

Wenn Sie angeben, Höhe nicht, oder Sie Höhe von percetage angeben, aber seine parenet keine Angabe Höhe angeben, block-Element wird auf Inhalt Höhe (0px für #zwei in diesem Fall).

Longer Explain

So Höhe nur auf Höhe min, weil DOM Höhe von min-height ohne Höhen Angabe beginnen.

jsFiddle

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

Answer 2

Check this out, Sie vermissen ein winziges Stück. Angenommen, Sie möchten die Höhe von #one im Vergleich zu #container und #two im Vergleich zu #one (das ist, was ich denke, dass Sie für gehen) festlegen. Wir benötigen eine Höhenangabe von #one, um eine Höhe von #zwei zu erhalten. Der Trick besteht hier darin, dem Element eine maximale Höhe, eine minimale Höhe UND eine Höhe zuzuweisen, wodurch es eine Höhe erhält, die durch das Minimum und das Maximum eingeschränkt ist.

diese css Versuchen:

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

Die Höhe nie erreicht, weil es durch die maximale Höhe begrenzt ist, aber ohne die Höhe zu erklären es Höhe: Auto, die nicht deklariert ist. Ich habe die Höhe von #container auf 74vh gesetzt, um das Ganze entsprechend der Größe des Ansichtsfensters anzupassen.