0

heightを使用して設定された div C がありmax-heightます。この div には div D が含まれています。

含まれている div D の高さが、含まれている div C とまったく同じ (それ以上ではない) になるようにします。

ここheightのように、div Cのプロパティを使用する場合

  • div C の高さは次を使用して設定されますheight: 90%
  • div D の高さは、height: 100%
  • 次に、すべてが正常に機能し、div D の高さが div C の高さと等しくなります

ここmax-heightのように、div Cのプロパティを使用する場合

  • div C の高さは次を使用して設定されますmax-height: 90%
  • div D の高さは、height: 100%
  • 次に、div D の高さは div C の高さと等しくありません (内部のコンテンツが非常に長いため、はるかに大きくなります)。フィドルでは良さそうに見えますが、div D を調べると、もっと大きいことがわかります。

しかし、max-heightcss プロパティを使用する必要があります。css のみを使用して、div D の高さを div C の高さと等しくなるように設定するにはどうすればよいですか?

<div id="container">
    <div id="A">
        <div id="B">
            <div id="C">
                <div id="D">
                    <div id="D1">D1</div>
                    <div id="D2">
                        D2 - very long content
                    </div>
                 </div>
            </div>
        </div>
    </div>
</div>

ありがとう！！！

4

2 に答える 2

6

期待どおりに動作しない理由max-heightは、含まれている div の高さが設定されていないためです。その名前が示すように、div の高さの上限を設定するだけです。

ブロック要素の高さのパーセンテージの計算方法に関するW3 CSS2 仕様からの引用を次に示します。これは、問題に光を当てるのに役立つかもしれません:

パーセンテージは、生成されたボックスの包含ブロックの高さに関して計算されます。包含ブロックの高さが明示的に指定されておらず (コンテンツの高さに依存する)、この要素が絶対配置されていない場合、値は「auto」と計算されます。

あなたの場合、含まれているdivの高さは明示的に設定されておらず、コンテンツの高さに依存max-heightし90%ます90%. 、包含 div の高さは、それ自体の包含要素の高さの 90% 未満になります。

私が信じていることを説明しようとする試み

ブラウザーは、含まれている div を の初期高さでレンダリングします。これは、まだコンテンツがないautoため、 に計算されます。0px含まれているブロックの高さの高さでレンダリングしたい含まれている div が来ると、ブラウザーはこれがばかげていることに100%気づきます。そのため、含まれている div の高さを代わりに設定することにしました。そうしないと、次に何が起こっても、含まれているブロックの高さが常に になるため、含まれている div は表示されません。ブラウザは、上記のルールのこの部分に固執しようとしていることを思い出してください。100%0px0pxauto100%0px0px

パーセンテージは、生成されたボックスの包含ブロックの高さに関して計算されます

今だけ、含まれている div 内にレンダリングしたい div がいくつか追加されています。以前の決定が下された時点では、ブラウザーはこれらの div についてまだ認識していませんでした。ブラウザがこれらの div をレンダリングした後にバックトラックして修正する場合、上で引用したルールの一部を事実上破っていることになります。間接的に*そのコンテンツの高さに基づいて、含まれる div のパーセンテージの高さを設定します。

このため、W3 仕様の人々はルールの 2 番目の部分を考え出しました。これにより、ブラウザーは、含まれている div の高さが設定されてautoいない場合 (したがって、デフォルトでauto)、含まれている div の高さを に設定することを決定できます。

したがって、これらの遅れた div は、ブラウザが予防措置を講じており、それらの div をレンダリングできることは幸運であると言えます。これは、ブラウザがプリエンプティブであり、含まれている div の高さを遅刻者autoに対応するために に設定しているためです。

*含まれる div のコンテンツの高さに基づいて含まれる div の高さを計算し、この値に基づいて含まれる div の高さの割合を計算します。

結論は

ブラウザーは W3 仕様に固執しているだけです。これは良いことです。最初のフィドルはブラウザ メーカーが仕様に準拠しているため機能しますが、2 番目のフィドルはまったく同じ理由で機能しません。

ソリューション

90%ブラウザ ウィンドウの高さを設定する div が、ブラウザ ウィンドウの高さが設定されている div の直接の子孫であることを確認することによってのみ、問題を解決でき100%ます。html祖先の div が完全に配置されていない場合、ドキュメント要素までのすべての div のすべての祖先も100%、それ自体に高さが設定されている必要があります。

上記の行は真です。ただし、絶対配置された祖先が検出された場合 (通常のドキュメント フローから除外されます)、この祖先自体が set を持つ祖先を持っていない場合position: relative(これにより、その絶対位置が、ブラウザ ウィンドウの高さではなく、相対的に配置された親の位置)、この祖先はブラウザ ウィンドウの高さに設定されます ( を使用top: 0px; bottom: 0px;)。その場合、DOM ツリーの実行は絶対位置の祖先で停止します。

于 2013-05-09T23:22:13.573 に答える
0

それは、D が C の中にあるからです。

#D {height: 100%;}

内部にあるdivの100％を占めるように指示するので、機能しますか？

さらに、これはhttp://css-tricks.com/the-css-box-model/に役立つかもしれません

于 2013-05-09T04:32:05.713 に答える