没有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/