DIV的滚动条比浏览器更宽

Question

我正在使用Wordpress作为CMS在网站上进行一些测试.在下面的示例中,页面的左上角在主要内容区域之外有一个"S"图形,根据浏览器宽度进行相应的剪裁.我想在页脚右侧使用"L"图形做类似的事情.

页面宽度设置为960px,我已经将页脚容器DIV设置为1088px,以便"L"出现在内容区域之外.问题是当滚动条超出浏览器的当前宽度时会出现滚动条.

我试过溢出:隐藏在页脚容器DIV上,但这似乎不起作用.我也试过溢出:隐藏在BODY元素上,这在IE中可以正常工作,但在其他浏览器中没有.

示例:http://unclemort.com/wp/

我真的希望有这样做,感谢任何帮助.

Answer 1

我今天试图弄明白这一点,偶然发现答案.你需要的是围绕着这一切的周围元素:

#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/