Home-電脳-フレームとスクロールバー

フレームとスクロールバー

InternetExplorer（以下IE）6でフレームを使ったページを見ると余計な横スクロールバーが表示されることがあります。解決策として、CSSのhtml要素に次の記述をする方法があります。

CSS
html { overflow-y:scroll }

overflow-y はIE独自のプロパティで、内容があふれた場合の縦方向の処理方法を指定するものです。（横方向を指定する"overflow-x"もあります）

ここで注意。 …つまり、私のやった失敗です。

上のCSS（以下本CSS）では、子ページ（各フレーム内に表示するページ）のためにわざわざ縦方向のスクロール表示を指定しています。
従って、本CSSを親ページ（<frameset>タグを使うページ）に使うと今度は、IEで見た時に 余計な縦スクロールバー（親ページの分）が表示されてしまいます。

解決策として、いくつか方法が考えられます。

  1. 親ページ・子ページとも本CSSを使う。→親ページの<html>タグに次の記述をする。
    HTML：親ページ
    <html style="overflow-y:hidden">
  2. 親ページ・子ページとも本CSSを使う。→次のCSSを使い、親ページの<html>タグに次の記述をする。
    CSS：親ページ・子ページ共通
    html          { overflow-y:scroll }
html#frameset { overflow-y:hidden }
    HTML：親ページ
    <html id="frameset">
  3. 親ページのみ本CSSを使わない。→親ページはCSS自体を使わない。
  4. 親ページのみ本CSSを使わない。→親ページは専用のCSSを使う。
  5. 親ページのみ本CSSを使わない。→子ページは親ページと共通のCSSと本CSSの２つを使う。
  6. 親ページ・子ページとも本CSSを使わない。→子ページの<html>タグに次の記述をする。
    HTML：子ページ
    <html style="overflow-y:scroll">
  7. 親ページ・子ページとも本CSSを使わない。→次のCSSを使い、子ページの<html>タグに次の記述をする。
    CSS：親ページ・子ページ共通
    html#frame { overflow-y:scroll }
    HTML：子ページ
    <html id="frame">

1.と2.の方法は、CSSでIEの縦スクロールバーを強制表示に、親ページのHTMLでIEの縦スクロールバーを強制非表示にする考え方です。
親ページの<noframes>タグに子ページと同じCSSを使いたい場合などにお勧めです。

5.以降の方法は、子ページのファイル数を考えるとあまりお勧めできません。

上に戻る