Question

我正在进行一个布局，其中主要内容div的大小为970px。在这个div后面，我想要一个尺寸为1200x600px的div（它将包含一个flash对象），如下所示：

width:1200px;
height:600px;
position:absolute;
left:50%;
margin-left:-600px;

问题是当浏览器的大小设置为小于1200px的宽度时，它会得到水平滚动条。我可以通过以下方式解决这个问题：

body {overflow-x:hidden;}

但我希望它的尺寸小于970px宽度时可以使用水平滚动条。

基本上，我试图让1200px div表现得更像css背景图像。有什么想法吗？

Answer 1

这适用于没有JavaScript：

<body style="margin:0">
<div style="position:absolute;width:100%;height:600px;overflow:hidden;min-width:970px;z-index:0;">
 <div style="position:absolute;width:1200px;height:600px;left:50%;margin-left:-600px;">
  --flash object--
 </div>
</div>
<div style="position:absolute;width:100%;z-index:100;">
 --main content--
</div>
</body>

更新：必须进行更改以适应您的绝对div定位（父div必须绝对定位）

Answer 2

完全可以使用CSS解决方案。关键部分是位置：固定和 z-index：-1 。这个例子中的两个DIV是兄弟姐妹，但还有其他可能性。此解决方案适用于最新版本的Chrome，FireFox，Safari，Opera和MSIE。

这不适用于没有正确实现 z-index 样式的MSIE6，但是如果你能够有一个与MSIE6兼容的解决方案（以1200px显示滚动条）重新安排事物并添加DIV包装。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html title="html">
  <head>
    <style type="text/css">
    #content
    {
      background: #ffffe8;
      height: 500px;
      margin: 0 auto;
      width: 970px;
    }
    #background
    {
      background: #ffe8e8;
      height: 600px;
      left: 50%;
      margin-left: -600px;
      position: fixed;
      top: 0;
      width: 1200px;
      z-index: -1;
    }
    </style>
  </head>
  <body title="body">
    <div id="content" title="#content">
      <p>content</p>
    </div>
    <div id="background" title="#background">
      <p>background</p>
    </div>
  </body>
</html>

Answer 3

你可以使用onresize事件，当它小于970px时，将overflow-x更改为auto或scroll。

如果您使用的是jQuery，请查看.resize()方法

Answer 4

我会使用CSS3媒体查询。

body{overflow:hidden;}

@media only screen and (max-width: 970px) {
     body{overflow:visible;}
}

首先设置要隐藏的主体上的溢出，使其不滚动。然后当屏幕小于970像素时，将其设置为可见，以便滚动。

没有浏览器滚动，Div比浏览器宽

4 个答案: