パンプキンスパイスラテ

IT系のことが多めの日記帳です

ブラウザの高さに合わせてスクロールバーを出すよ

W3Cによって「iframe」が非推奨とされた為、最近は限られたエリアの中でスクロールを出したい場合はCSSで実現することになる。というより、一番外側以外、コンテンツ内でスクロールは出さないほうがいいんだけど。まぁ、お客さんの要望だとか、見栄え重視だとかで必要に迫られることもあるよね。今回、仕事で必要だったので作ってみた。CSSだけでは、コンテンツの高さをブラウザの高さに合わせて広げたり縮めたりってのはできないんだけど、javascriptで実現できたよ。下の絵の「ココ」って書いてあるエリアにスクロールを出す場合ね。
┌──────┐
├─┬────┤
│ │ ココ │
└─┴────┘

window.onload = frameHeight;
window.onresize = frameHeight;

function frameHeight(){
  if(navigator.appName.charAt(0) == 'M'){
    //IE
    var winHeight =
      document.documentElement.clientHeight-195+'px';
  }
  else {
    //IE以外
    var winHeight = window.innerHeight-185+'px';
  }
  document.getElementById('scroll').style.height=winHeight;
}

xhtml

<div id="scroll"></div>

IEの場合、document.documentElement.clientHeightでブラウザの高さを取得して、ヘッダーの高さ分をマイナスにする。IE以外では、window.innerHeightで取得して、同じくマイナス。数値がそれぞれ違うので、そこは要調節。そのサイズ変更関数をonloadとonresizeで呼び出して、ページを開いた時とウインドウサイズを変更した時に、値をセットし直す。っていう処理。onresizeはちょっとメモリを食うみたいだけど、そんなにウインドウサイズを変更しまくる人って少ないから、そこは無視。これでウインドウの高さに追従して、コンテンツの高さが変動します。どうしてもスクロールバーが必要な時は是非。


・追記 2008/01/31
このスクリプトの弱点発見。テーブルレイアウトで組んだ場合、下記の★の量が多くてスクロールが出ると画面が若干崩れる。
┌──────┐
├─┬────┤
│★│    │
└─┴────┘
その場合は、★部分のコンテンツを少なくするか、またはCSSレイアウトにすれば大丈夫だと思う。