Div шире браузера без прокрутки браузера

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

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

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

body {overflow-x:hidden;}

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

В принципе, я пытаюсь получить div 1200px, чтобы вести себя скорее как изображение css. Есть идеи?

источник

2010-09-04 tybro0103

Это работает без 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: пришлось вносить изменения, чтобы приспособить ваше абсолютное позиционирование Div (родительский DIV должен быть абсолютно позиционируется также)

источник

2010-09-04 21:07:39 userx

Это помещает ящики в нужное место в двух измерениях, но это помещает содержимое за фон. – danorton

@ danorton использует свойство z-index свойства CSS, чтобы установить основной объект сверху. Я обновлю свой код. – userx

Удивительный обход! Хорошая работа! – spez86

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

если вы используете JQuery, посмотреть вверх .resize() метод

источник

2010-09-04 20:59:16

Если вы собираетесь это сделать, убедитесь, что вы используете dobouncing: http://benalman.com/code/projects/jquery-dotimeout/examples/debouncing/ (проверьте второй пример) –

debouncing выглядит очень полезно, что парень Бен Алман написал несколько опрятных плагинов. Недавно я использовал его плагины для обмена и BBQ. –

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

Это не работает с 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>

источник

2010-09-04 22:02:30 danorton

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

body{overflow:hidden;} 

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

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

источник

2013-10-02 14:44:49 user2428593

Div шире браузера без прокрутки браузера

ответ

Смежные вопросы