ページ全体を「ヘッダー」「メイン」「フッター」のように分けて表示している時に、ヘッダー→メイン→フッター間で背景画像を途切れさせないで表示させるスクリプトです。

使用背景画像

bg_image.jpg (画像の高さ: 40px)

「ヘッダー」「メイン」「フッター」で上の背景画像を配置していた場合、ヘッダー、フッターは通常固定の高さなので背景画像の高さに合わせられますが、メイン部分の高さだけはページ内容によって変わってしまいます。そのため、メイン→フッター間で背景が途切れて表示されてしまいます。

これを、Javascriptでメイン部分の高さを調べて「背景画像の高さで割り切れる値」に設定しなおすことでメイン→フッターで背景が途切れないようにします。

• サンプルページ - 失敗例
• サンプルページ - 成功例

html構造

<div id="header">
  <p>ヘッダー</p>
</div>
<div id="container">
  <p>メイン</p>
</div>
<div id="footer">
  <p>フッター</p>
</div>

css

#header {
  width: 400px;
  height: 80px;
  background: right top url(bg_image.jpg) repeat-y;
}
#container {
  width: 400px;
  background: right top url(bg_image.jpg) repeat-y;
}
#footer {
  width: 400px;
  height: 80px;
  background: right top url(bg_image.jpg) repeat-y;
}
p {
  margin: 0;
  padding: 0;
}

Javascript

function containerSize() {
  var container = document.getElementById("container");
  var height = container.offsetHeight;
  if ( height % 40 ) {
    container.style.height
     = height + (40 - (height % 40)) + "px";
  }
}
window.onload = containerSize;

offsetHeight

概要

オブジェクトのオフセット領域の高さを調べる

構文

object.offsetHeight

offsetHeightはcontainerの高さを調べるのに使いました。そして、高さが背景画像の高さである40pxで割り切れない場合はcontainerの高さを40pxで割り切れる高さに設定しなおしています。