div の min-height とその子の高さでいくつかの問題が発生しています。何が起こっているかは知っていますが、それを解決する方法がわかりません。
私はこのHTMLを持っています:
<div id="container">
<img src="#"/>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
そしてスタイルシート:
#container { min-height:180px; max-height:20%;}
#container img { height:60%;}
#container ul { height:40%; padding:10px;}
#container ul li { height:100%; float:left;}
私がしようとしているのは、親の 40% である UL に適用することです。私が得るのは、ULが親ではなくウィンドウの高さを取得していることです。max-height または固定の高さだけを指定すると、機能します。
アイテムが作成されたときなどに問題が発生したと思いますが、IMGが親の高さを取る原因はわかりません
解決策はありますか?
@Jay-Bee-Why のおかげで、やっと解決策に近づいたと思いますが、わかりませんでした。
ケース 1- コンテナの高さ:180px と最大高さ:20% 次に、コンテナがフローし、その子が最大高さになりますが、最小値に制限がないため、問題は解決されません
ケース 2- コンテナーには min-height、height、および max-height があります ここでは、min-height のみが機能しています。高さ:180px; max-height:20%} ここでコンテナの高さは 100px から 180px まで変化します。max-height は省略されます。
コメントで説明しているように、私が探しているポイントは、180px からウィンドウ ブラウザーの高さの 20% まで可変の高さを持つ DIV で、2 つのアイテムが含まれています。親の高さの 60% の IMG と、その中に 40% の UL がある場合、親の高さの 100% のフローティング LI があります。