1. Home
  2. Archive
  3. ページの高さを自動調節するjavascript

ページの高さを自動調節するjavascript

コンテンツの量が少ないページだと、極端にページの高さが小さくなったりすることがあります。cssのheightプロパティで高さをしてしまえばいいのですが、コンテンツの内容が変わる度にcssを編集するのは管理が大変になってしまいます。

コンテンツ量が少ない場合のページのサンプル

そこでコンテンツ量が少なくても、ウインドウの高さまでは高さを確保するjavascriptを書いてみました。

ページの高さを調整するページのサンプル

このスクリプトは下記のようになっています。

window.onload = function(){
  var wrapper = document.getElementById('wrapper');
  var footer = document.getElementById('footer');
  var showHeight = getshowHeight();
  var bodyHeight = document.body.scrollHeight;
  if(showHeight>=bodyHeight){
    wrapper.style.height = showHeight + 'px';
    footer.style.position = "absolute";
    footer.style.bottom = "0px";
  }
}

function getshowHeight() {
  if(window.innerHeight)
    return window.innerHeight;
  if(document.body.parentNode.clientHeight)
    return document.body.parentNode.clientHeight;
  if(document.body.clientHeight)
    return document.body.clientHeight;
}
<div id="wrapper">
  <div id="header">
   ヘッダ
  </div>
  <div id="contents">
   コンテンツ
  </div>
  <div id="footer">
   フッタ
  </div>
</div>

ウインドウの高さとページの高さを比較して、ウインドウの高さのほうが大きければページの高さをウインドウの高さにします。そしてフッタの位置を一番下に持ってきます。

コンテンツの量が少なくることがあるサイトでは使えるんじゃないかと思います。

追記(2007/04/17)

CSSだけでさらにいい感じにできました。
ページの高さを自動調節するjavascriptの追記（CSSのみで実現する）

トラックバックURL

http://webtech-walker.com/archive/2007/03/26231718.html/trackback

※トラックバックを受け付けてから表示するまでにしばらく時間がかかる場合があります。

コメントフォーム

※HTMLタグは使用できません。