height:100%指定について@CSS
bodyやhtmlめいっぱいに背景を表示して(例:jQueryのBACK STRETCHとか)コンテンツ内でこの表示領域の高さ100%に表示したいものがあった場合。
例えば、背景の上にサイドバーなんかがあって、背景色が指定されていて、その内容量に関係なくこのボックスの高さを表示画面に対して100%にしたい場合。
こんな具合にしたいと。(左の縦長の背景が白いメニューバーですね)
ですが、ただheight:100%にしてもなりません。
こんなふうに内容量に応じた高さしか確保されません。
これを実現するには、高さを指定したい要素の直近の親要素に高さが指定されている必要があるので、この例ではbodyとhtmlにheight:100%を指定した上で、右側のメインメニューの要素にheight:100%を指定します。
html, body{ height:100%; } #mainMenu{ height:100%; }