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

110

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

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

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

html css Дэйв
источник
Если вы используете фреймворк, такой как бутстрап или фундамент, убедитесь, что столбец now является первым дочерним элементом body, но вложен в другой блок div, имеющий какие-то отступы (small-12 fe).
Lightningsoul
ты решил это @ Дэйв?
gumuruh
Безумно, не правда ли? Спустя 6 лет и iOS Safari все еще демонстрирует эту проблему. Я пробовал множество решений CSS, но в конце концов пришлось прибегнуть к использованию jQuery. stackoverflow.com/a/45009357/391605
Майк Гледхилл

Ответы:

266

Я добавил:

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

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

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

Рион Уильямс
источник
4
здорово, это только что исправило ошибку, которая беспокоила меня некоторое время!
gleddy
22
У меня возникла проблема с прокруткой на сафари iphone с этим кодом, стало очень медленно. В конце концов, я обнаружил, что это комбинация height: 100% и overflow-x: hidden, поэтому я удалил height: 100%, и это работает намного лучше.
Пол Мейсон
Спасибо, это сработало как шарм. Я всегда задавался вопросом, как прокатиться по почти бесконечной полосе прокрутки. Не знаю, почему это не было отмечено как ответ.
isurfbecause
5
Я обнаружил, что класс 'row' начальной загрузки давал {margin-right: -15px}, что вызывало это на моей странице.
JosephK 01
2
По мнению @ JosephK, эта проблема часто возникает из-за неправильного использования объектов контейнера, строк и столбцов Bootstrap, которые используют заполнение и отрицательные поля для идеальной компенсации друг друга, но ТОЛЬКО ПРИ ИСПОЛЬЗОВАНИИ должным образом в унисон. Иначе сломается! По моему опыту, это одна из наиболее частых причин появления пустого пространства справа. Для БРИЛЛИАНТНОГО визуального объяснения контейнера, строки, столбца для Bootstrap, включая обсуждение этой и других проблем, прочтите это (нет, я это не писал): helloerik.com/…
james
133

Отлаживайте свой 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.

optimiertes
источник
1
это действительно пригодилось
Josan Iracheta
6
Гениальное решение! Это поможет вам найти корень проблемы и исправить ее правильно, а все, что для этого потребуется, - это несколько строк css.
opdb
3
Это должен быть принятый ответ ИМО. Я держу пари, что большинство людей использовали 100vw как ширину чего-либо и в результате получили эту ошибку. Простое скрытие переполнения - неоптимальное решение.
Люк
Это впечатляет, потратил 2 часа на это чертово белое пространство, это решило проблему.
Карлос Росо
Ух ты, потратил много часов и нашел виновника всего несколькими строками кода. Спасибо,
дружище
55

Изучив некоторые из полезных стратегий, представленных здесь, я обнаружил, что мне нужно только добавить специальный 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;
  }

}

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

Джон Райзер
источник
5
Это было единственное, что решило мою проблему
Джейсон Дэвис 01
1
Спасибо - лучшее решение для меня. Справедливо unobstrusive тоже
geedubb
Это решает проблему и имеет смысл для мобильного белого пространства
Роб Глисон,
После применения прокрутка на Safari iphone6s становится медленной. Не хватает ли мне дополнительного свойства для мобильного Safari, чтобы оно работало бесперебойно?
Эрик Рыбалкин
лучший ответ для меня !!
Юсеф Будая,
28

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

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

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

дефис
источник
Этот метод помог мне найти ошибку, спасибо
Билл,
Да, или вы можете спуститься вниз по дому, скрывая дивы наивысшего уровня один за другим, а затем зайти внутрь них ... и так далее
hatenine
Это действительно единственный способ успешно решить основную проблему, когда у вас есть странные элементы, например, с символом height: 0или height: 1. В моем случае, я обнаружил , что причина была «невидимый» класс странствующего в Drupal 7 ядра: drupal.org/node/2664214
geerlingguy
10

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

Hom
источник
5

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

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 это первая строка, которая вызывает проблему.

DMin
источник
2

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

Лу Р.
источник
2

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

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

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

БегемотРастлер
источник
Или установите для box-sizingсвойства значение border-box.
Benpai
2

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

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

яркость
источник
Мне пришлось установить html, body на width: 0, чтобы избавиться от призрачного элемента вверху в Firefox.
Гаравани,
1

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

modern4life
источник
1

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

Вот мой код:

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

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

Майкл
источник