2

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

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

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

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

我真的希望有办法做到这一点，任何帮助都感激不尽。

4

2 回答 2

5

我今天试图自己弄清楚这一点，并偶然发现了答案。您需要的是围绕所有具有以下内容的周围元素：

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

于 2012-04-27T07:59:32.747 回答
-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 宽，这会导致出现滚动条。

只要页脚具有固定宽度并且它的父级没有溢出：隐藏，如果没有足够的宽度使页脚适合，您将获得滚动。任何其他容器也是如此。

于 2010-03-01T10:52:14.527 回答