2

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 があります。

4

1 に答える 1

0

作業画像など、質問に詳細を含める必要があります。しかし、ここで私の Fiddleを見てください。いくつかの可能な説明が表示されます。

  1. height:100%li要素に適用しています。つまり、それぞれliがその親要素である と同じ高さulです。したがって、現在、 内のコンテンツはそれ自体ulの高さの 4 倍です。それぞれのサイズが4 つあるためです。私のフィドルでは、箇条書きが親からあふれているのを見ることができます。ulliul

  2. パーセンテージベースの高さ (または幅) は、親の高さに基づいています。ドキュメントで指定した唯一の高さは ですmin-height:180px。親コンテナーに実際の高さ (最小の高さではない) を適用するまで、目的のパーセンテージ ベースのレイアウトが実現されなかったことがFiddleでわかります。以外に実際の高さの値height:autoがないと、ブラウザーはパーセンテージベースの高さを計算する方法がわかりません。これは幅には当てはまらないことに注意してください。要素の幅にパーセンテージのみを指定すると、ブラウザはブラウザ ウィンドウに基づいて計算することを認識します。

于 2013-04-29T22:59:59.043 に答える