2011-08-09 16 views
12

コンテナの高さの100%を占めるようにしようとしていますが、コンテナの要素には最小高さしか指定されていません。残念ながら、私がこれを行うと、高さ指示は無視されます。 Here is an example。赤い "b" divは、親全体を満たすはずです。それは、IE7、クロム、またはFF3.6ではありません。CSS最小高さのコンテナの高さ100%

コンテナに「高さ:1px」があれば、「a」div、「b」は「a」の高さ全体に伸びます。 See here。しかし、これはFF3.6とIE7のみであり、Chromeではありません。だから私はここで何か間違っていると思う。

私は、これが私が見ていないという解決策がなければならないという共通の問題だと感じています。この場合、ストレッチ・ツー・ハイトを達成する最良の方法は何ですか?

+0

親コンテナの高さが指定されている必要があります。最小の高さだけではありません。 – Kyle

答えて

11

あなたのCSSは、子要素の高さが親要素の指定された高さの100%であることを意味します。親の高さを指定しない場合、100%は何も意味しません。したがって、動作しません。

あなたは子供に親のposition:relativeposition:absoluteを使用することによって達成することができるとします

http://jsfiddle.net/57EZn/25/

それは美しい解決策ではないのですが、それはあなたが後にあるものを行います。

+0

ああ、はい、私はそれを覚えているので、このハックは時々他のレイアウトの問題を解決するために使われます。私は位置ルールで遊んでみましたが、正しい組み合わせを見つけることができませんでした。論理的には、なぜ設定位置が内部divの高さを変更する必要があるのか​​わかりませんが、明らかに機能し、このソリューションを使用できる可能性があります。ありがとう。 – waxwing

+0

高さを変えるのは「position:absolute」だけではありません。高さは指定された 'top' AND' bottom'によって変更されます。これにより、子要素は親要素に相対的に指定された上部および下部の位置に自身を「アタッチ」します。この場合の「bottom:0」は、「親の中で可能な限り低い」を意味する。つまり、「あなたの親の身長に合わせるサイズ」。 – Bazzz

+0

今すぐ入手します。言い換えれば、内部divから "height:100%"ディレクティブを削除すると、トップとボトムが作業を行うためにも機能します。 – waxwing

関連する問題