Question

我已为我的网站实施了液体布局。我已将body标签的宽度设置为100％。

<html>
<head>
</head>

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

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

对于某些页面，会显示垂直滚动条。因为身体标签宽度减少了16px。我需要设置体宽，使滚动条的显示不会影响它我试过跟随，但它不适用于FF9。：

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

任何人都可以建议一种方法来实现这一目标吗？

Answer 1

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

html,body
{
 height:101%;
}

你也可以这样做：

html {
       overflow-y: scroll;
}

（我不认为溢出方法适用于Opera）

Answer 2

在问这个问题时这可能是不可能的，但是如今，您可以这样做：

body {
    width: 100vw;
}

唯一的潜在缺点是滚动条出现时，最右边的16px会被滚动条覆盖，但是如果您的项目符合以下任何条件，则实际上可能需要这样做：

Answer 3

你不应该使用calc这么左右。它未在Chrome中实施，

如果宽度设置为100％，则容器不会受到垂直滚动条的影响。它每次都是100％宽度。无论是否有滚动条，它都会在每次100％的视口中填充。