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

Question

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

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

您可以在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必须是960像素，因为内部内容是宽
• max-width必须1020px因为它是白色区域的默认宽度
• width被设定为100％，以总触摸窗的边缘

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

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

#container { 
    width: 960px; 
}