トップヘッダーが100%幅に固定されているサイトがあり、そのDIV内に、中央に980px幅の別のdivがあります。
ブラウザのスクロールバーを作成するaをロードすると(ページが長いため)、ページがロードされ、ヘッダーがロードされますが、スクロールバーに対応するために左にジャンプします。
スタイルシートに追加overflow-y:scroll;
してスクロールバーを常に表示できるようにすることはできますが、jquery fancybox v.2を使用しているので、これは良くありません。長いfancyboxポップアップでこれを行うと、2つのスクロールバーが表示されます。失敗。
それで、スクロールバーがあるかのようにヘッダーの中央セクションをロックする方法はありますが、実際にはスクロールバーはありませんか?また、スクロールバーが存在するかどうかに関係なく、同じ位置にあります。
これは私が今使っているCSSです:
#topbar {
width:100%;
height:51px;
margin:0;
padding:0;
position:fixed;
z-index:1000;
/*Making sure it sticks to left of window in IE7*/
top:0;
left:0;
float:left;
background-color:#eeeeee;
border-bottom:1px solid #333;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
}
.header {
width:980px;
margin:0 auto;
position: fixed;
z-index: 1001;
left: 50%;
margin-left: -490px;
}
その呼ばれる例えば<div id="topbar"><div class="header">blah blah</div></div>
解決策はありますか?