1

この jsfiddle の例を見てみましょう: http://jsfiddle.net/2YbpZ/5/

contentここでは、 div を 100% の高さに伸ばしていますが、正常に動作しています。ただし、contentdiv内に非常に背の高いコンテンツがある場合、これが発生します: http://jsfiddle.net/2YbpZ/2/

ご覧のとおり、contentdiv はビューポートの下部で途切れており、その中のコンテンツを続けたいと思っています。

親要素 (html と body) が 100% の高さに設定されており、それ以上にならないため、これが発生する理由はわかっています。これを修正するために、ラッパー div を追加すると、動作するようになりました: http://jsfiddle.net/2YbpZ/4/

しかし、別の問題があります.div内のコンテンツcontentがビューポートの外に伸びるのに十分な長さではない場合、divはcontent次のようにページの高さまで伸びません: http://jsfiddle.net/2YbpZ/4 /

それで、質問は、contentdivを常に少なくとも100%の高さにするためにこれをどのように適応させることができますか?

4

1 に答える 1

3

ラッパーを使用しないでください。ただし、#content divmin-height:100%の代わりに使用してください。height:100%

注: IE6 は min-height をサポートしていません。

于 2013-01-04T20:32:13.200 に答える