私の Web サイトには、ページの 1 つにそれぞれ 4 つの列があります。したがって、ラッパー内のマスクの幅は 400% です。ナビゲーションは、scrollTo jquery プラグインを使用して、垂直方向と水平方向の両方で行われます。
ナビゲーション バーが と に設定されていたためposition: fixed;、width: 100%;div のスクロールと重なっていた。私はそれを与えましたright: 17px;が、ページをスクロールさせます +17 余分なピクセル。
各ページの幅を 100% - 17 ピクセルに設定する方法はありますか?
right: 17px;それ以外の場合、スクロールを重ねずにナビゲーションを配置しないようにするにはどうすればよいですか?
ウェブサイトへのリンク: www.inbrackets.dk/test
最も簡単な解決策は、 calcを使用することです。
width: -webkit-calc(100% - 17px);
width: calc(100% - 17px);
ただし、これはサポートが限られています。IE8 以前ではサポートされていません。
補足: いくつかのブラウザー、特に Windows マシンでは、スクロールバーの幅が 20px であるため、right:20px. また、あなたのフォントは私のマシンでは非常に読みにくいです:
私は正しいポジショニングをまったく台無しにしません。スクロール バーは#wrapperdiv にあります。それはでposition: absoluteあるため、スクロール バーが.#nav
まず、 から を削除してheightから、#wrapper次の css を に変更または追加します#wrapper。
top: 70px ; /* clears your nav */
bottom: 0px; /* gives it the height; puts the scroll bar at the bottom of the screen */
calcの使用は避け、固定ナビゲーションを左：0、右：0に設定します。
position: fixed;
top:0;
right: 0;
left: 0;
フィドル： http： //jsfiddle.net/a8LXV/