html - 防止页面容器上出现水平滚动条

Question

我的网站使用 960 像素的固定宽度容器。

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

您可以在 http://jsfiddle.net/2QqxB/5/embedded/result/ 看到想要的效果.

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

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

代码(也在 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;
}