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

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

Во всяком случае, чтобы предотвратить прокрутку в сторону, есть x-переполнение: скрыто как на 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; 
}

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

источник

2014-10-17 user3516176

Пожалуйста, попробуйте исправить 'х-overflow' в' перелива-x'. – emmanuel

К сожалению, это была опечатка. :) Только что понял. Я фактически не копировал это с моего сайта, так что это не проблема. – user3516176

Считаете ли вы изменение структуры для своего html? – remixdesign

body { 
 
\t margin: 0; 
 
\t padding: 0; 
 
} 
 
#wrapper { 
 
\t width:65%; 
 
\t margin:0 auto; 
 
} 
 
.extend { 
 
\t /* 35/65*100 = 26.92 */ 
 
\t margin-right:-26.92%; 
 
\t margin-left:-26.92%; 
 

 
\t background-color: red; 
 
} 
 
.extent-content { 
 
\t width:100%; 
 
\t padding:10px; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title>Full width example</title> 
 
</head> 
 

 
<body> 
 
\t <div id="wrapper"> 
 
    \t <div class="extend"> 
 
    \t \t <div class="extent-content"> 
 
    \t \t \t This is the div extending beyond the page and causing sideways scroll. 
 
    \t \t </div> 
 
    \t </div> 
 
\t </div> 
 
</body> 
 
</html>

источник

2014-10-17 18:54:50 alexeybondarenko

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

Fiddle с примером: http://jsfiddle.net/h0k5pape/2/

стиль Код:

<div class="outer"> 
    <div class="inner"></div> 
</div>

источник

2014-10-17 19:12:02 remixdesign

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

ответ

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