親が最小/最大の高さを持つときのCSSの高さの割合

Question

要素の高さのパーセントを使用する場合、そのパーセンテージはその親のパーセントです。子どもを親の40％にしたいとしましょう。親には最大と最小の高さが割り当てられていますが、明示的な高さは割り当てられていません。たとえば、次のように

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

ディビジョン2は表示されません。彼の親のdiv（div 1）をmax-height:50%から次のように変更すると：height:50% divが明示的に定義されているため、親の高さが分かるのでdiv 2が表示されます。私の質問は、height

(min/max)-heightはなくを使用しながら、ここが二つが表示されるのdivを作るための方法である

Answer 1

あなたは高さを指定してはいけない、またはあなたがpercetageで高さを指定しますが、そのparenetを与えていないが、高さを指定した場合fiddle、ブロック要素はコンテンツの高さにリサイズされます（この場合#twoでは0px）。

Longer Explain

DOMの高さは、高さを指定せずに最小の高さから開始しますので、だから、高さをminに高さを設定。

jsFiddle

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

Answer 2

使用すると、1つの小さな部分が欠落している、これをチェックしてください。あなたが#containerと#oneと比較して#oneの高さを設定したいとします（これは私があなたのために行っていると思います）。 #twoから高さを取得するには、#oneの高さステートメントが必要です。ここでのトリックは、最大高さ、最小高さ、および高さを要素に設定することで、最小値と最大値によって制約される高さを与えます。

はこのCSSを試してみてください。それが最大の高さによって制約されているので

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

高さが達成されることはありませんが、それは高さである高さ宣言しなくても：オート、宣言されていないです。ビューポートのサイズに応じて全体を反応させるために#containerの高さを74vhに設定しました。