Div wider than browser without browser scrolling

问题

I'm working on a layout where the main content div will have a with of 970px. Behind this div, I want a div with dimensions 1200x600px (it will contain a flash object) positioned like so:

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

The problem is when the browser is sized to a width smaller than 1200px it get the horizontal scroll bar. I can fix that by:

body {overflow-x:hidden;}

But I DO want it to have the horizontal scroll bar when it get sized to less than 970px in width.

Basically, I am trying to get the 1200px div to behave more like a css background image. Any ideas?

回答1:

This works without 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>

UPDATE:Had to make changes to accommodate your absolute div positioning (the parent div has to be absolutely positioned as well)

回答2:

A solution is possible entirely with CSS. The key pieces are position: fixed and z-index: -1. The two DIVs in this example are siblings, but there are other possibilities. This solution works with the latest versions of Chrome, FireFox, Safari, Opera and MSIE.

This does not work with MSIE6, which doesn’t correctly implement the z-index style, but there is an MSIE6-compatible solution (which shows the scrollbar at 1200px) if you’re able to rearrange things and add a DIV wrapper.

<!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>

回答3:

you could use the onresize event and when its less than 970px, change overflow-x to auto or scroll.

if you are using jQuery, look up the .resize() method

回答4:

I would use a CSS3 media query.

body{overflow:hidden;}

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

First set the overflow on the body to be hidden so that it does not scroll. Then when the screen is less than 970px, set it back to visible so that it will scroll.

来源：https://stackoverflow.com/questions/3643965/div-wider-than-browser-without-browser-scrolling

标签

javascript

html

css

flash

browser