• トップページ
• 初心者の館
• 私的デザイン論
• CSSテクニック
• ギャラリー

IE6でもスクロールしても動かないボックスサンプル

フレームやjavascriptを使わなくても、スクロールしても動かないボックスを作ることは可能なのです。

しかも、position:fixed;が効かないIE6でも使える方法です。

左のメニュー部分に注目してください。スクロールしても動かないでしょ。

このページで使用している主なスタイルシート
*{
    margin:0;
    padding:0;
}
html{
    height:100%;
    overflow:hidden;
}
body{
    background-image:url(../../../img/back.gif);
    height:100%;
    width:80%;
    margin:0px auto;
}
div#main{
    background-image:url(../../../img/sub-back.jpg);
    height:100%;
    overflow:auto;
    padding-left:104px;
}
h1,p{
    padding:1em;
}
#sub{
    width:104px;
    height:100%;
    background-color:#7F2D00;
    position:absolute;
    z-index:100;
}
詳しくは解説を読んでね。

解説へ戻る

あ
あ
あ
あ
あ
あ
あ
あ
あ
あ
あ
あ
あ
あ
あ
あ
あ
あ
あ
あ
あ
あ
あ
あ
あ