沒有DIV比瀏覽器更寬的滾動條

Question

我在使用Wordpress作爲CMS的網站上做了一些測試。在下面的例子中，頁面左上角的主要內容區域外有一個「S」圖形，根據瀏覽器寬度進行相應的剪裁。我想在頁腳的右側做一個類似「L」的圖形。

頁面寬度設置爲960像素，並且我製作了頁腳容器DIV 1088px，以便「L」出現在內容區域之外。麻煩的是，當超過瀏覽器的當前寬度時，會出現滾動條。

我試過overflow：隱藏在頁腳容器DIV上，但這似乎不起作用。我也嘗試過溢出：隱藏在BODY元素上，這在IE中可以正常工作，但在其他瀏覽器中不起作用。

例子：http://unclemort.com/wp/

我真的希望有去做到這一點，任何幫助感激地接受。

Answer 1

嘗試在style.css中，65行，並補充說：

#footer-container { 
    border: none; 
    overflow: hidden; 
} 

說明：

#footer-container #footer { 
    background: #f5e8f7 url('images/slobraico-footer-pink-full.gif') no-repeat top left; 
    width: 1088px;  
    height: 217px; 
    overflow: hidden; 
    } 

你隱藏滾動條實際上​​是不那裏。 您正在挑選的滾動條是另一個。 問題在於頁腳寬度爲1088px，導致滾動條出現。

只要頁腳具有固定的寬度，並且它的父級沒有溢出：隱藏，如果頁腳沒有足夠的寬度以適應，您將獲得滾動。 其他容器也一樣。

Answer 2

我今天想弄明白這一點，偶然發現了答案。 你需要的是周圍的一切周圍的元素具有這樣的：

#wrapper { 
    min-width: 600px; //whatever width you want 
    overflow-x: hidden; 
} 

你的主要內容應該有相同的寬度，和需要突出部分出應有陰性切緣的東西。

這裏有一個完整的例子：

HTML：

<div id="outer"> 
    <div id="container"> 
     <div class="row"> 
      <div class="inner">Hello World</div> 
     </div> 
    </div> 
</div> 

CSS：

#outer { 
     min-width: 300px; 
     overflow-x: hidden; 
    } 

    #container { 
     width: 300px; 
     margin: 0px auto; 
     background: gray; 
     height: 500px;  
    } 

    .row { 
     width: 350px; 
     background: blue; 
     margin-left: -25px; 
    } 

    .inner { 
     background: yellow; 
     margin-left: 25px; 
     width: 300px; 
     height: 100px; 
    } 

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

的jsfiddle：

http://jsfiddle.net/aaronjensen/9szhN/