1

ヘッダー、フッター、本文、左右のナビゲーションを備えた非常にシンプルなページがあります。それらすべてが合わさって、幅の 100% の素敵な長方形のページが作成されます。すべてCSSシートのdivを使用して作成されました。本文に 20 個の画像サムネイルがあり、ページのサイズが変更されると、フッターがずれてしまいます。これを修正するには、body div にスクロールバーを追加したいと思います。これはすでにoverflow-y: auto;で行っています。ただし、スクロールバーを追加すると、本体の右側にスペースが追加されるようで、左右のナビゲーションの下に配置する必要があり、すべてが吹き飛ばされます. 助けてください。

#headerElement {
width: 100%;
height: 50px;
border: 2px solid #000000;
background-color: #F8AA3C;
}
#bodyElement {
    margin-left: 10%;
width:  80%; 
color:  blue;
height: 400px;
background-color:  #F8883C; 
border: 2px dashed #F8AA3C;
    overflow-y: auto;
}
#leftNavigationElement {
float: left;
width: 10%; 
height: 400px;
border: 2px dashed #FF0000;
background-color: #8F883C;
}
#rightNavigationElement { 
float: right;
width: 10%; 
height: 400px;
border: 2px dashed #0000FF;
background-color: #F888FC;
}
#footerElement {
clear: both;
border: 2px dashed #00FFFF;
height: 50px;
width: 100%;
}
4

2 に答える 2

2

スクロール バーは div の幅の内側にはありませんが、それでもスペースを占有するため、スペースまたは負のマージンを与える必要があります。IE の幅は 18 ピクセルだと思いますが、IE ではそれを設定できないため、それをデフォルトにする必要があります。=( 

::-webkit-scrollbar { width: 18px; margin-right:-18px; }
::-moz-scrollbar { width: 18px; margin-right:-18px;}
::-o-scrollbar { width: 18px; margin-right:-18px;}
于 2013-01-28T21:12:25.790 に答える
0

ページを再構築してフローを改善するか、{overflow-y: scroll} でスクロールバーを強制し、それに応じて幅を調整してレイアウトが崩れないようにする必要があります。

于 2013-01-28T20:56:25.840 に答える