如何阻止一个固定的、100%宽度的元素与浏览器的滚动条重叠？

Question

我的网站有4个栏目--每个栏目对应一个页面。因此，包装中的掩膜的宽度是400%。导航是使用scrollTo的jquery插件进行的，包括垂直和水平两个方向。

因为导航栏被设置为position: fixed;和width: 100%;，所以它与div的滚动条重叠。我给了它right: 17px;，但它也使页面滚动+17个额外的像素。

有没有办法将每个页面的宽度设置为100% - 17像素？

否则，如何避免在不重叠滚动的情况下将right: 17px;放在导航上？

网站链接：www.inbrackets.dk/test

Answer 1

我根本不会弄乱正确的定位。你的滚动条在你的#wrapper目录上，因为它是position: absolute的，我会在上面调整一些设置，让滚动条位于#nav下面。

首先，从#wrapper中删除height，然后将以下css更改/添加到#wrapper

top: 70px ; /* clears your nav */
bottom: 0px; /* gives it the height; puts the scroll bar at the bottom of the screen */

Answer 2

最简单的解决方案是使用calc。

width: -webkit-calc(100% - 17px);
width:         calc(100% - 17px);

然而，这是有限的支持-在IE8和更低版本中不支持。

旁注:在一些浏览器中，特别是在windows机器上，滚动条是20px宽的，所以你需要right:20px。另外，你的字体在我的机器上也很难阅读：

​

​

Answer 3

我会避免使用calc，并将固定的导航设置为仅跨越左侧: 0和右侧: 0；

position: fixed;
top:0;
right: 0;
left: 0;

小提琴：http://jsfiddle.net/a8LXV/