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

Question

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

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

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

Взгляните на наш сайт на FireFox, чтобы понять, что я имею в виду.

139

html css

Источник

user565828 06 янв '11 в 17:39

12 ответов

Другие вопросы по тегам html css

user557445 06 янв '11 в 17:45 2011-01-06 17:45 · Answer 1 · 2011-01-06 17:45

Я добавил:

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

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

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

340

Источник

user557445 06 янв '11 в 17:45

user3010027 05 май '14 в 21:46 2014-05-05 21:46 · Answer 2 · 2014-05-05 21:46

Отладка вашего CSS для Ghost CSS Elements.

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

Или добавьте CSS непосредственно:

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

В моем случае проблема с кнопкой "Мне нравится" на Facebook.

180

Источник

user3010027 05 май '14 в 21:46

user1429494 31 май '12 в 21:50 2012-05-31 21:50 · Answer 3 · 2012-05-31 21:50

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

}

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

user1476992 10 авг '14 в 12:30 2014-08-10 12:30 · Answer 4 · 2014-08-10 12:30

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

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

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

user2132993 04 окт '14 в 03:43 2014-10-04 03:43 · Answer 5 · 2014-10-04 03:43

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

18

Источник

user2132993 04 окт '14 в 03:43

user237351 06 янв '11 в 18:06 2011-01-06 18:06 · Answer 6 · 2011-01-06 18:06

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

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

user1088649 19 апр '12 в 03:27 2012-04-19 03:27 · Answer 7 · 2012-04-19 03:27

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

Вот мой код:

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

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

user1656078 08 сен '12 в 03:01 2012-09-08 03:01 · Answer 8 · 2012-09-08 03:01

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

3

Источник

user1656078 08 сен '12 в 03:01

user3227560 18 мар '14 в 17:09 2014-03-18 17:09 · Answer 9 · 2014-03-18 17:09

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

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

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

user217180 27 апр '11 в 13:45 2011-04-27 13:45 · Answer 10 · 2011-04-27 13:45

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

До

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

После

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

3

Источник

user217180 27 апр '11 в 13:45

user1190791 05 июл '14 в 16:12 2014-07-05 16:12 · Answer 11 · 2014-07-05 16:12

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

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

user972439 06 ноя '13 в 05:59 2013-11-06 05:59 · Answer 12 · 2013-11-06 05:59

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