防止页面容器上的水平滚动条

Question

我在我的网站上使用了960px固定宽度的容器。

但是，我想添加一个包装器，为页面添加一个盒子阴影，并增加左/右边距的大小。

您可以在http://jsfiddle.net/2QqxB/5/embedded/result/找到所需的效果。

问题是在1024 x 768时我得到一个水平滚动条，因为包装器是1020px。

那么如何在不使用背景图像和没有水平滚动条的情况下实现相同的效果。

代码（也在http://jsfiddle.net/2QqxB/5/）：

HTML：

<div id="wrap">
    <div id="container">
        <p>
            Lorem ipsum dolor sit amet...
        </p>
    </div>
</div>​

CSS：

html, body {
 height: 100%;   
}

body {
 background-color: #f3a450;   
}

#wrap {
 width: 1020px;
 box-shadow: 0px 0px 9px 1px rgba(0, 0, 0, 0.4);
 margin: 0 auto;
 min-height: 100%;
 background-color: #fff;
}

#container {
 width: 960px;
 margin: 0 auto;
}

Answer 1

您可以使用#wrap上的正常/最小/最大宽度来使其工作：

• min-width必须为960px，因为内部内容是那么宽
• max-width必须为1020px，因为它是白色区域的默认宽度
• width设置为100％以始终触及窗口边缘

参见示例：http://jsfiddle.net/2QqxB/7/

#wrap {
  max-width: 1020px;
  min-width: 960px;
      width: 100%;
}

#container {
  width: 960px;
}