この jsfiddle の例を見てみましょう: http://jsfiddle.net/2YbpZ/5/
content
ここでは、 div を 100% の高さに伸ばしていますが、正常に動作しています。ただし、content
div内に非常に背の高いコンテンツがある場合、これが発生します: http://jsfiddle.net/2YbpZ/2/
ご覧のとおり、content
div はビューポートの下部で途切れており、その中のコンテンツを続けたいと思っています。
親要素 (html と body) が 100% の高さに設定されており、それ以上にならないため、これが発生する理由はわかっています。これを修正するために、ラッパー div を追加すると、動作するようになりました: http://jsfiddle.net/2YbpZ/4/
しかし、別の問題があります.div内のコンテンツcontent
がビューポートの外に伸びるのに十分な長さではない場合、divはcontent
次のようにページの高さまで伸びません: http://jsfiddle.net/2YbpZ/4 /
それで、質問は、content
divを常に少なくとも100%の高さにするためにこれをどのように適応させることができますか?