當div超過我的內容寬度時，我該如何防止水平滾動條出現？

Question

我見過這個問題有很多不同的方法，但我只是不明白答案，因爲應用程序或場景似乎與我的不同。

基本上我有一個940px的內容寬度，我想使用一個'畫架'作爲我的幻燈片的背景，但畫架圖片延伸大約400px PAST 940px的內容寬度，導致水平滾動條顯示在940px +畫架寬度（400px） - 但我想要滾動條只顯示當內容是940px或更少 - 是否有一個簡單的修復即時通訊俯瞰？

<div id="showcase"> 
      <div class="content"> 
       <div class="left"> 
        <h1>Lidya Aaghia Tchakerian</h1> 
        <p> 
         Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
         Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
        </p> 
       </div> 

       <div id="slideshowArea"> 
        <div id="slideshow"> 
         <ul class="bjqs"> 
          <li><img src="images/slider1.jpg" width="326" height="534" alt="" /></li> 
          <li><img src="images/slider1.jpg" width="326" height="534" alt="" /></li> 
          <li><img src="images/slider1.jpg" width="326" height="534" alt="" /></li> 
          <li><img src="images/slider1.jpg" width="326" height="534" alt="" /></li> 
         </ul> 
        </div> 
       </div> 
      </div> 
     </div> 

我的CSS：

/* showcase 
------------------------------------------*/ 
#showcase { 
    position: relative; 
    padding: 40px 0 0 0; 
    height: 828px; 
    background: #fafafa; 
    border: 1px solid #d8d8d8; 
} 

#showcase .left { 
    position: absolute; 
    width: 388px; 
    top: 200px; 
    text-align: center; 
} 

#showcase .left h1 { 
    color: #cd6d6d; 
} 

#slideshowArea {  
    position: absolute; 
    width: 824px; 
    left: 495px; 
    height: 875px; 
    background: url('../images/easel.png') no-repeat; 
} 

#slideshow { 
    display: block; 
    position: relative; 
    left: 72px; 
    height: 534px; 
    width: 326px; 
    border: none; 
    top: 107px; 
} 

#slideshow ul { 
    position: relative; 
    z-index: 99; 
    width: 326px; 

} 

ul .traits { 
    padding: 0; 
    float: left; 
    margin: 10px 0 0 30px; 
} 

.traits li { 
    color: #fff; 
    float: left; 
    display: block; 
    margin-right: 25px; 
    padding: 6px 0 0 22px; 
    background: url('../images/checkbox.png') no-repeat 0 0; 
    height: 30px; 
    list-style: none; 
} 

任何及所有的幫助深表感謝。

感謝， 彌敦道

編輯：查看頁面訪問http://www.digicrest.com/lidya

Answer 1

也許這：

#slideshowArea {  
    position: absolute; 
    width: 824px; 
    max-width: 940px; 
    overflow-x: hidden; /* Maybe overflow-y instead ?? */ 
    left: 495px; 
    height: 875px; 
    background: url('../images/easel.png') no-repeat; 
} 

Answer 2

我理解這兩種方法之一：

1）如果你想讓你的#slideshow div沒有滾動條，你可以將它的overflow屬性設置爲'hidden'：

#slideshow { 
display: block; 
position: relative; 
left: 72px; 
height: 534px; 
width: 326px; 
border: none; 
top: 107px; 
overflow-x: hidden; /*ADD THIS*/ 

}

2）我理解這一點的另一種方法是，你必須有一個應該畫架的背景圖像的DIV爲「持有」你#slideshow DIV，但是這樣的背景圖片超過了它所需的尺寸。一種解決方案，如果你使用的是固定設計，就是將背景圖像製作成你的容器div的大小，這樣你就可以或多或少地知道事物應該在哪裏。

另一個解決方案是使用CSS background-size屬性;如果你想要你的背景寬度爲940px，你可以這樣做：

#container { 
    background: url('directory/file.jpg'); 
    background-size: 940px auto; 
} 

希望這有助於！

Answer 3

使用媒體查詢，你可以指定你的CSS元素的溢出屬性。目前還不清楚您想要定位哪個ID或類，因此我在下面的示例中將其稱爲#your_id。

首先一切以下940px：

@media only screen and (max-width: 940px) { 
body { 
overflow-x:visible; 
} 
} 

然後一切上面940px：

@media only screen and (min-width: 940px) { 
body { 
overflow-x:hidden; 
} 
} 

瞭解更多有關@media查詢這裏：http://webdesign.about.com/od/css3/a/css3-media-queries.htm