防止頁面容器上的水平滾動條

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; 
}