流式布局：避免由于垂直滚动条导致页面宽度发生变化

Question

13

我已经为我的网站实现了流体布局。我已将body标签的宽度设为100％。

<html>
<head>
</head>

<body>
    <div id="container">
        some content
    </div>
</body>

body
{
   margin: 0;
   padding: 0;
   width: 100%;
}

一些页面会出现垂直滚动条，导致 body 标签的宽度减少了 16 像素。我需要设置 body 标签的宽度，使得滚动条的显示不会影响它。
我已经尝试了下面的方法，但在 Firefox 9 上无效：

 body{
    width: -moz-calc(100% - 16px);
}

请问有没有什么方法可以实现这个目标？

- Nilesh

3个回答

0

可能在这个问题被提出的时候还不可能，但现如今你可以这样做：

body {
    width: 100vw;
}

唯一可能的缺点是，当出现滚动条时，最右边的16像素将被覆盖，但如果您的项目符合以下任何条件，则实际上您可能希望这样：

- Daniel W. R. Hart

-2

你不应该使用 calc 函数。因为它在 Chrome 中没有实现。

如果你将宽度设置为 100%，那么你的容器不会受到垂直滚动条的影响。它始终是 100% 的宽度。无论有没有滚动条，它都会填充整个视口的 100%。

- Sven Bieder

我已经比较了具有滚动条和没有滚动条的页面的主体宽度。确切的差异为16像素。我使用FF9和Chrome 17进行了测试。 - Nilesh

是的，确实有这样的区别，但您的页面仍然在可见视口（视口宽度-滚动条宽度）的100％中显示。如果您完全缩放了页面，则无论是否显示滚动条，都不会出现问题。所有大小都将与可见视口匹配。这就像我稍微调整浏览器宽度一样。 - Sven Bieder

1

是的，我明白你的意思。现在问题是，有些页面显示垂直滚动条，而有些页面则没有。因此，如果用户快速切换页面，看起来网站布局的宽度会略微改变。（因为滚动条占用的空间）我正在尝试解决这个问题。 - Nilesh

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jamie Dixon · Accepted Answer

解决这个问题的一种方法是确保始终存在滚动条。然后，您可以放心地为页面设置样式，而不必担心它们会左右移动。

html,body
{
 height:101%;
}

您还可以执行以下操作：

html {
       overflow-y: scroll;
}

我认为溢出方法在Opera浏览器中不起作用。