Browser 比浏览器宽的DIV没有滚动条

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

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

我尝试过溢出：隐藏在页脚容器DIV上，但这似乎不起作用。我也尝试过溢出：隐藏在BODY元素上，这在IE中可以正常工作，但在其他浏览器中不行

例如：

---

我真的希望能有人帮我，谢谢你的帮助。

试试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，这会导致出现一个滚动条

只要页脚有固定的宽度，并且它的父级没有溢出：隐藏，如果没有足够的宽度容纳页脚，您将得到一个滚动条。

---

其他容器也是如此。

今天我自己也在想办法，却意外地找到了答案。 您需要的是一个围绕着所有具有以下特征的事物的周围元素：

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

您的主要内容应该具有相同的宽度，需要突出的内容应该具有负边距

下面是一个完整的示例：

HTML:

jsfiddle：

---

您好，谢谢您的快速回复。我已经尝试将overflow:hidden放在footer容器和footer div中，但这只是页脚右侧部分在主内容之外的部分（超过960px），我现在所做的是将overflow-x:hidden放在一起；在BODY style元素中有overflow-y:auto，这似乎起到了作用-现在唯一的问题是这些属性与其他浏览器的向后兼容程度如何？实际上，overflow-x:hidden在BODY上可能不是一个好主意，因为当浏览器窗口大小调整或小于我的网站页面宽度（960px）时，它会隐藏滚动条。仍然在寻找答案！嗯，是的，它确实像预期的那样。它隐藏了溢出，这是它被告知要做的。如果将背景图像向右对齐，而不是向左对齐，会怎么样？那对你不管用吗？请看：（是的，溢出：隐藏在主体上有可怕的效果。）这是一个漂亮的跨浏览器解决方案（尽管，我不得不将overflow-x更改为just overflow，所以在某些浏览器中，在最外层的div上没有垂直滚动条）。

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

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