Div, расширенный за пределы контейнерного div с использованием отрицательных полей, имеет прокрутку x только при подключении к телевизору через кабель HDMI.

Сейчас я работаю над сайтом компании. Я использовал отрицательные поля плюс положительный отступ, чтобы нижняя и верхняя панели заполняли 100% ширины страницы, даже если они содержатся в другом div, обертка установлена ​​​​около 65%. Насколько я знаю, это относительно известный способ сделать это, но он приводит к тому, что контент выходит за пределы страницы.

В любом случае, чтобы предотвратить боковую прокрутку, есть x-overflow: hidden как в html, так и в теле. Это работает, когда я сижу за своим компьютером, но когда я сегодня показывал сайт своим коллегам, он не работал. Мой ноутбук был подключен к большому телевизору через кабель HDMI, и я мог прокручивать в сторону (без полосы прокрутки, только с помощью трехкнопочной мыши). Вернулся к своим обычным настройкам (тот же ноутбук со вторым подключенным монитором), и я больше не могу прокручивать.

Код примерно такой:

HTML

<div id="wrapper">
 <div class="extend">
  This is the div extending beyond the page and causing sideways scroll. 
 </div>
</div>

CSS

html {
 overflow-x: hidden;
}

body {
 overflow-x: hidden;
}

.extend {
 padding-left:35%;
 margin-left:-35%;
 padding-right:35%;
 margin-right:-35%;
}

 #wrapper {
 width:65%;
 margin:0 auto;
}

Это не очень большая проблема для меня (если я не обнаружу, что это происходит в большем количестве случаев). Я сомневаюсь, что мой веб-сайт будет часто просматриваться на большом телевизоре, подключенном к ноутбуку, но мне любопытно, что вызывает это. Или, если у кого-то есть лучшие способы расширения div за пределы их контейнеров, я тоже хотел бы услышать об этом. Спасибо заранее за любые данные!


html css hdmi horizontal-scrolling extend
person user3516176    schedule 17.10.2014    source источник
comment
Попробуйте исправить x-overflow на overflow-x.   -  person emmanuel    schedule 17.10.2014
comment
Извините, это была опечатка. :) Только что понял. На самом деле я не копировал это со своего сайта, так что проблема не в этом.   -  person user3516176    schedule 17.10.2014
comment
Вы бы рассмотрели изменение структуры вашего html?   -  person remixdesign    schedule 17.10.2014
comment
Я бы. Зависит от того, что вы хотите предложить, конечно.   -  person user3516176    schedule 17.10.2014

Ответы (1)


arrow_upward
0
arrow_downward

Мне нравится использовать структуру, которая имеет внешнюю оболочку и внутреннюю оболочку для каждого раздела. Внутренняя оболочка получает фиксированную ширину, а внешняя обычно занимает 100% экрана. Это позволяет вам иметь разделы полной ширины и содержащие разделы вместе без использования отрицательных полей.

Поиграйте с примером: http://jsfiddle.net/h0k5pape/2/

Стиль кода:

<div class="outer">
    <div class="inner"></div>
</div>
person remixdesign    schedule 17.10.2014