ショウジンブログ on Hatena

“お芝居をしないと、この社会では異邦人として扱われるほかない”

height:100%指定について@CSS

bodyやhtmlめいっぱいに背景を表示して(例:jQueryのBACK STRETCHとか)コンテンツ内でこの表示領域の高さ100%に表示したいものがあった場合。

例えば、背景の上にサイドバーなんかがあって、背景色が指定されていて、その内容量に関係なくこのボックスの高さを表示画面に対して100%にしたい場合。

こんな具合にしたいと。(左の縦長の背景が白いメニューバーですね)

f:id:showjinx:20160525120620p:plain

ですが、ただheight:100%にしてもなりません。

こんなふうに内容量に応じた高さしか確保されません。

f:id:showjinx:20160525120708p:plain

これを実現するには、高さを指定したい要素の直近の親要素に高さが指定されている必要があるので、この例ではbodyとhtmlにheight:100%を指定した上で、右側のメインメニューの要素にheight:100%を指定します。

html, body{
     height:100%;
}

#mainMenu{
     height:100%;
}

www.baigetsu.biz