【#base/#main/#contents】

css_split2_vertical

仕様

幅700px、左上固定、縦2分割部分スクロール

デザイン上の注意

左【#navigation】より、本体【#main】の長さが小さいとき、【#navigation】だけが突き抜けてしまう。視覚的に美しくないので、fixedされている【#navigation】部分は透明で作り、背景に当たる【#base】部分の色が透けて【#navigation】の色に見えるようにする。【#main】部分の各パートは、【#base】の色が出ないように隙間なく色を入れる。

左固定部分(【#navigation】部分)で、マージンに当たる【#navigationmargin】の位置は、全く指定していない場合、ブラウザによって親要素を参照したりブラウザを参照したりする。

  • IE6、IE7はブラウザを参照
  • Opera、Firefox、Safariは親要素を参照

そのため、未指定にはせずに、Fixed(IE6の場合は、absoluteも追加)で固定してしまうのがよい。

備考

IE7、Opera、Firefox、Safariでは完全動作
IE6では、左右ボックス(【#navigation】【#base】)が一緒になってスクロールする