Пустое пространство появляется с правой стороны страницы, когда фоновое изображение должно занимать всю длину страницы [закрыто]

У фоновых изображений нашей веб-страницы возникают проблемы в FireFox, а также в Safari в iOS на iPad / iPhone с пустым пространством, отображаемым в правой части страницы.

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

Совершите посмотреть на нашем сайте на FireFox , чтобы увидеть , что я имею в виду.

Я добавил:

html,body
{
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden; 
}

в ваш CSS на самом верху над другими классами, и, похоже, это решило вашу проблему.

Ваш обновленный файл .css доступен здесь

Отлаживайте свой CSS для Ghost CSS Elements.

Используйте эту закладку для отладки CSS: https://blog.wernull.com/2013/04/debug-ghost-css-elements-causing-unwanted-scrolling/

Или добавьте CSS напрямую:

* {
  background: #000 !important;
  color: #0f0 !important;
  outline: solid #f00 1px !important;
}

В моем случае проблема была вызвана кнопкой Facebook Like.

Изучив некоторые из полезных стратегий, представленных здесь, я обнаружил, что мне нужно только добавить специальный CSS для iOS (я поместил его внизу своей основной таблицы css). Похоже, что скрытие переполнения-x было ответом для меня. Я предполагаю, что указание ширины на 100% помогает в случае, если мой контент расширяется. Следует отметить, что эта проблема была у меня только в iOS. Если он также есть в Firefox, вероятно, следует использовать только блок html и body, поскольку @media специально нацелен на мобильные устройства.

@media
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5){

  html,
  body{
    width:100%;
    overflow-x:hidden;
  }

}

Пожалуйста, помогите мне, если это кому-то покажется неправильным :)

Это довольно старый вопрос, но я решил добавить свои 2 цента. Я пробовал вышеуказанные решения, в том числе ghost css, который я обязательно сохраню для использования в будущем. Но в моей ситуации ничего из этого не сработало. Вот как я исправил свою проблему. Надеюсь, это поможет кому-то другому.

Откройте инспектор (или как хотите) и, начиная с первого тега div в теле, добавьте display: none;только к этому элементу. Если полоса прокрутки исчезает, вы знаете, что этот элемент содержит элемент, вызывающий проблему. Затем удалите первое правило css и спуститесь на один уровень вниз в содержащий элемент. Добавьте CSS в этот div, и если полоса прокрутки исчезнет, ​​вы узнаете, что этот элемент либо вызывает, либо содержит оскорбительный элемент. Если добавление CSS ничего не делает, вы знаете, что проблема возникла не из-за этого div, и либо другой div в контейнере, либо сам контейнер вызывает ее.

Для некоторых это может занять слишком много времени. К счастью для меня, моя проблема была в заголовке, но я могу представить, что это займет немного времени, если ваша проблема, скажем, в нижнем колонтитуле или что-то в этом роде.

overflow-x: hidden; идеально подходит для меня.

Проблема в файле:

style.css - строка 721

#sub_footer {
    background: url("../images/exterior/sub_footer.png") repeat-x;
    background: -moz-linear-gradient(0% 100% 90deg,#102c40, #091925);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#091925), to(#102c40));
    -moz-box-shadow: 3px 3px 4px #999999;
    -webkit-box-shadow: 3px 3px 4px #999999;
    box-shadow: 3px 3px 4px #999999;
    padding-top:10px;
    font-size:9px;
    min-height:40px;
}

удалите строки:

-moz-box-shadow: 3px 3px 4px #999999;
-webkit-box-shadow: 3px 3px 4px #999999;
box-shadow: 3px 3px 4px #999999; 

Это в основном дает градиент тени только нижнему колонтитулу. В Firefox это первая строка, которая вызывает проблему.

У меня также была такая же проблема ( фон тела веб-сайта, отображающий правое белое поле в iPhone Safari ), и я обнаружил, что добавление фонового изображения в <html>тег устранило проблему.

Перед

body {background:url('images/back.jpg');}

После

html, body {background:url('images/back.jpg');}

По-видимому, (-o-min-device-pixel-ratio: 3/2) вызывает проблемы. На моем тестовом участке отрезалась правая сторона. Я нашел обходной путь на github, который сейчас работает. Использование (-o-min-device-pixel-ratio: ~ "3/2"), похоже, работает нормально.

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

.homepageconference .container {
padding-left: 12%;
}

который используется вместе с кодом, в котором указано, что элемент имеет ширину 100%, в результате чего общая ширина элемента составляет 112% от размера экрана. Чтобы исправить это, либо удалите отступы, либо замените отступы с запасом в 12% для того же эффекта, либо измените ширину (или максимальную ширину) элемента на 88%. Это происходит в main.css в строке 343. Надеюсь, это поможет!

У меня была такая же проблема, поэтому попробовал несколько вещей. Один из них, казалось, сработал для меня - удаление ширины и добавление поплавка к тегу body.

Может не работать для всех экземпляров, но в моем недавнем сценарии скрытие переполнения в элементах контента было непозволительно ...

Я видел белую линию справа на моем iPad, также только в горизонтальном положении. Я использовал div с фиксированной позицией с шириной фона 960 пикселей и z-индексом -999. Этот конкретный div отображается только на iPad из-за медиа-запроса. Затем содержимое было помещено в оболочку div шириной 960 пикселей. Ответы, представленные на этой странице, не помогли в моем случае. Чтобы исправить проблему с белой полосой, я изменил ширину оболочки содержимого на 958 пикселей. Вуаля. Больше нет белой правой белой полосы на iPad в горизонтальном положении.

Этот вопрос висит некоторое время, но ни одно из исправлений, которые я смог найти, у меня не сработало (с той же проблемой с ipad), но я использовал свое собственное решение, которое должно работать для большинства людей, которых я думаю.

Вот мой код:

html {
   background: url("../images/blahblah.jpg") repeat-y;
   min-width: 100%;
   background-size: contain;
}

Наслаждайтесь!