Разделить шире, чем браузер без прокрутки браузера - PullRequest
Новая
       0

Разделить шире, чем браузер без прокрутки браузера

1 голос
/ 05 сентября 2010

Я работаю над макетом, в котором у основного содержимого div будет 970px.За этим div я хочу создать div с размерами 1200x600px (он будет содержать объект flash), расположенный следующим образом: 

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

Проблема в том, что когда браузер имеет ширину меньше 1200px, он получает горизонтальныйполоса прокрутки.Я могу исправить это следующим образом: 

body {overflow-x:hidden;}

Но я действительно хочу иметь горизонтальную полосу прокрутки при ширине менее 970 пикселей.

По сути, я пытаюсь получитьDIV 1200px, чтобы вести себя как фоновое изображение CSS.Есть идеи?

Ответы [ 4 ]

4 голосов
/ 05 сентября 2010

Это работает без 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 также должен быть абсолютно позиционирован)

2 голосов
/ 05 сентября 2010

Решение возможно полностью с помощью CSS. Ключевыми элементами являются позиция: фиксированная и z-индекс: -1 . Два DIV в этом примере - братья и сестры, но есть и другие возможности. Это решение работает с последними версиями Chrome, FireFox, Safari, Opera и MSIE.

Это не работает с MSIE6, который неправильно реализует стиль z-index , но есть 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>
0 голосов
/ 02 октября 2013

Я бы использовал медиазапрос CSS3. 

body{overflow:hidden;}

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

Сначала установите переполнение на теле, которое будет скрыто, чтобы оно не прокручивалось.Затем, когда размер экрана меньше 970 пикселей, установите его обратно в видимое состояние, чтобы он прокручивался.

0 голосов
/ 05 сентября 2010

вы можете использовать событие onresize, а когда его значение меньше 970px, изменить overflow-x на auto или scroll.

если вы используете jQuery, найдите метод .resize()

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...