css - 子要素が親の最大高さからオーバーフローしないようにする

Question

ボディのパーセンテージの高さを持つ div があるレイアウトを作成しようとしています。さらに、 を使用してこの高さを制限したいとも考えていますmax-height。

親の内部に、親の高さ (または最大高さ) 内に収まるすべてのサブ要素を持ついくつかの列を作成したいと考えています。

この例を参照してください: http://jsfiddle.net/k6rfr/2/

height問題は、子要素 (それぞれ 50% の高さ) が、 ではなく親の と一致することmax-heightです。

max-heightの代わりに子要素を一致させる方法はありheightますか?

Answer 1

これはまさにあなたが必要とするものではありませんが、問題を解決します:

http://jsfiddle.net/k6rfr/3/

2 番目のラッパー要素を省略して、子要素に max-height ダイレクトを配置しました。ここでの問題は、2 つの異なる場所で高さを定義する必要があることです。

Answer 2

エラーは、特定のブロックの「外側」の高さが60％で、300px以降に書き込んだものと一致しない可能性があることだと思います。正しくありません。高さの指定されたパーセンテージを削除すると、ブロックは所定の位置に落ちます。または、正しい比率の高さと最大高さを入力します。