トップページ

擬似フレーム

スクロールテスト

スクロールテスト

擬似フレーム

説明

positionを利用してメニューを配置。fixedを用いるが、IEではfixedが効かないのでハックを用いてabsoluteを当てる。この際にbodyのheight（widthも？）を100%と指定する。この時にoverflow:hidden;を用いる。左側にメニューを配置する場合は簡単だが、右側に表示させるにはスクロールバー関係で少しだけ工夫が必要。Operaだとメイン側がスクロールしなくなってしまう。div#mainにheight:100%;とoverflow:scroll;を与えてみても駄目だった。仕方がないのでbodyに対するoverflowをautoにして、右側にスクロールバーが二列で表示させるようにする。IEではメニューがスクロールバーに挟まれた状態です。

CSSファイル

  1. 基本的なCSS
  2. IE用のCSS

備考

メニュー内のli要素の左マージンを幾らか指定してやらないと、なぜかFirefoxで横スクロールバーが出現する。どのmarginやpaddingをゼロにしても消えてくれなかった。ボーダーも関係無い様だ。また、メニューにはpositionを用いているのでソースを書く順番はどちらが先でも良い。

関連リソース

アンカー1

アンカー2

アンカー3

アンカー4

アンカー5

- Copyrights © 2005 rara All Rights Reserved -
SEO [PR] 爆速!無料ブログ 無料ホームページ開設 無料ライブ放送