Logicky Blog

Logickyの開発ブログです

いい感じにくっつけたフッターとヘッダーの間にあるコンテンツの背景を白く塗りつぶしたい

ヘッダーとフッターの間にあるコンテンツ空間はコンテンツ量によって高さが変動しますので、普通にbackgroundの背景色を設定しても、コンテンツ量が少ない場合、余白が出来てしまいます。この余白をださずに背景色で埋めたいです。

display: flexってやつが使えないだろうかと思いましたが、flexでコンテンツかこっちゃうというのは今更現実的でないので、結局javascript使っちゃうことにしました。

$(document).ready(function(){
    var f = 94;
    var height = $('#wrap').height();
    var h = $('#header').height();
    $('#contents').height(height - h - f);
});

f = 94というのは、コンテンツのfooterと重ならないようにするためのpadding-bottomの値になります。jqueryのheight関数は、paddingを除いた高さのことみたいです。