コンテナdivがmin-heightプロパティをパーセントで設定すると、heightとmin-heightは内部divのパーセンテージでは機能しなくなるようです。両方ともパーセントである場合、ネストされた最小高さが動作しない
のコードは以下の通りです...(すべてが働い予想通り):
html,body{
height:100%;
background:black;
}
.container{
height: 30%;
background-color: green;
}
p{
min-height:90%;
background-color:purple;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="container">
<p>The minimum height of this paragraph is set with percentage</p>
</div>
</body>
</html>
私は分の高さの割合にコンテナのdivを設定すると、紫色の段落がダウンして縮小します。私は段落が含まれているdivの90%を維持することを期待していました。この非稼働バージョンとの唯一の違いは、コンテナdivの「高さ」を「最小高さ」に設定していることです。
html,body{
height:100%;
background:black;
}
.container{
min-height: 30%; /* LINE CHANGED */
background-color: green;
}
p{
min-height:90%;
background-color:purple;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="container">
<p>The minimum height of this paragraph is set with percentage</p>
</div>
</body>
</html>
何が起こっているかに任意のヘルプや洞察力をいただければ幸いです。私は本当にこれができるようにしたい:これは、より複雑なデザインの一部です。私はちょうど質問の基本にそれをぬぐいました...
...これは予想される動作ですが、結果はあなたが残念ながら期待していたものではありません。 – scooterlord