html - 如何防止div滚动

Question

我正在尝试创建一个网站，其中 .wrapper 沿页面中间垂直运行，而 .banner 则在页面顶部附近水平展开。 .banner 将包含一张 1600x400 的图像以及一些链接。我想要做的是创建一种效果，让横幅“跑出”页面。为此，我希望水平滚动条仅在浏览器宽度小于 .wrapper 宽度时出现。我正在尝试实现类似 EA Homepage 的效果水平滚动条仅在浏览器宽度小于内容而非横幅时出现。

我想要的图片:

要求:

• 仅当浏览器宽度小于时才显示水平条.wrapper 的宽度
• 当浏览器宽度小于 .banner 的宽度时不显示水平条
• .banner 必须在浏览器右侧一直可见(不能被 .wrapper 截断)

我看到了这个other post这与我的相似，但没有解决。我尝试了一些建议的解决方案，但对我没有帮助。

代码:http://jsfiddle.net/NZb3w/

<div class="wrapper">
    <div class="banner">
        <img src="http://www.placehold.it/1600x400">
    </div>
</div>

.wrapper {
    width: 960px;
    margin: 0 auto;
    background: #ccffff;
    height: 800px;
    padding-top: 50px;
}

Answer 1

也许试试

.wrapper {
  min-width: 960px; 
  overflow-x:auto;
  width: 100%;
}

这将允许 .wrapper 的宽度拉伸(stretch)超过 960 像素，但一旦达到 959 像素，它就会添加滚动条。