如何防止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

尝试使用max-width，这样当div获得最大宽度可用时，它将设置scroll-x：或y，无论你需要什么。

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