Білий пробіл відображається на правій частині сторінки, коли фонове зображення повинно подовжувати повну довжину сторінки [закрито]

110

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

Фонові зображення прекрасно поширюються на інші веб-переглядачі, але у нас виникають труднощі не розширювати повну довжину веб-переглядача в цих браузерах.

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

html  css 
— Дейв
джерело
Якщо ви використовуєте такий кадр, як завантажувальний засіб чи фундамент, перевірте, чи стовпець зараз є першим дочірнім тілом, але вкладений в інший дів, який має якусь підкладку (малий-12 фе).
— Lightningoul
Ви вирішили це @Dave?
— 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
дивовижно, що якраз виправила помилку для мене, яка мене турбує якийсь час!
— переглянуто
22
У мене була проблема з прокруткою на ifari safari з цим кодом, це стало дуже повільно. Зрештою, я виявив, що це поєднання висоти: 100% та переливу-х: приховано, тому я прибрав висоту: 100%, і це працює набагато краще.
— Пол Мейсон
Завдяки цьому спрацювало як шарм. Я завжди цікавився, як позбутися майже нескінченної смуги прокрутки. Не впевнений, чому це не було позначено як відповідь.
— isurf тому, що
5
Я виявив, що клас "рядок" bootstrap дає {margin-right: -15px}, що спричиняє це на моїй сторінці.
— JosephK
2
До точки зору @ JosephK, ця проблема часто виникає при неправильному використанні контейнерів, рядків та стовпців Bootstrap, які використовують набивання та негативні поля для ідеального компенсації один одного, але ТІЛЬКИ, КОЛИ ВИКОРИСТОВАНІ належним чином в унісон. Інакше він ламається! На мій досвід, це одна з найпоширеніших причин появи білого простору праворуч. Для BRILLIANT візуальне пояснення контейнера, рядка, стовпця для Bootstrap, включаючи обговорення цієї та інших проблем, читайте це (ні, я цього не писав): helloerik.com/…
— james
133

Налагоджуйте свій CSS для елементів Ghost CSS.

Використовуйте цю закладку для налагодження 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 Button» викликала проблему.

— optimiertes
джерело
1
це дійсно було в нагоді
— Джосан Ірачета
6
Блискуче рішення! Це допоможе вам знайти корінь проблеми та правильно її виправити, і все, що потрібно, - це кілька рядків css.
— опдб
3
Це має бути прийнятою відповіддю ІМО. Моя обставина, що більшість людей використовували 100 Вт як ширину чогось, і отримали цю помилку в результаті. Просто приховування переливу є недостатньо оптимальним рішенням.
— Лука
Це вражаюче, витратили 2 години на той проклятий білий простір, це вирішило це.
— Карлос Росо
Нічого собі, витратили багато годин і знайшли винуватця з лише кількома рядками коду. Спасибі товариш :)
— Khpalwalk
55

Дослідивши деякі корисні стратегії, що тут представлені, я виявив, що мені потрібно лише додати специфічний CSS для iOS (я помістив його в нижній частині мого основного css аркуша.) Схоже, приховування переповнення-x було відповіддю для мене. Я припускаю, що визначення ширини на 100% допомагає в тому випадку, якщо мій вміст виходить ширшим. Слід зазначити, що у мене виникло це питання лише в iOS. Якщо він також є у Firefox, просто html та body 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
Це єдине, що вирішило мою проблему
— JasonDavis
1
Спасибі - найкраще виправлення для мене. Досить
— ненав'язливий
Це вирішує проблему і має сенс для мобільного білого простору
— Роб Глісон
Після застосування, прокрутка на Safari iphone6s стає млявою. Чи не вистачає я додаткової властивості для мобільного Safari, щоб він працював безперебійно?
— Ерік Рибалкін
найкраща відповідь для мене !!
— Юсеф Будая
28

Це досить старе питання, але я подумав, що я додам свої 2 копійки. Я спробував вищевказані рішення, включаючи css ghost, які я, безумовно, заощаджую для подальшого використання. Але жодне з них не працювало в моїй ситуації. Ось як я вирішив свою проблему. Сподіваємось, це допоможе комусь іншому.

Відкрийте інспектор (або все, що завгодно) та, починаючи з першого діла в тезі тіла, додайте display: none;до цього елемента. Якщо смуга прокрутки зникає, ви знаєте, що елемент містить елемент, який викликає проблему. Потім видаліть перше правило css і опустіться на один рівень в елемент, що містить. Додайте css до цього div, і якщо смуга прокрутки відійде, ви знаєте, що елемент або викликає, або містить елемент, що порушує. Якщо додавання CSS нічого не робить, ви знаєте, що причину проблеми викликав не той div, а інший div в контейнері викликає його, або сам контейнер його викликає.

Для деяких це може бути занадто багато часу. Пощастило, моє питання було в заголовку, але я можу уявити, що це займе трохи часу, якщо ваше питання було сказано, у нижньому колонтитулі чи щось.

— дефіс
джерело
Цей метод допоміг мені знайти помилку
— Білл
Так, або ви можете спуститися до дому, приховуючи один за одним
— діви
Це дійсно єдиний спосіб успішно виправити кореневу проблему, коли у вас є такі дивні елементи, як, наприклад, з height: 0або height: 1. У моєму випадку, я виявив , що причина була «невидимий» клас мандрівного в Drupal 7 ядра: drupal.org/node/2664214
— geerlingguy
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 це проблема, яка викликає перший рядок.

— ДМін
джерело
2

Мабуть, (-o-min-співвідношення пристрою-пікселів: 3/2) викликає проблеми. На моєму тестовому сайті це спричинило відсікання правої сторони. Я знайшов вирішення проблеми на Github, яка працює зараз. Використання (-o-min-device-pixel ratio: ~ "3/2"), здається, працює нормально.

— Лу Р.
джерело
2

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

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

який використовується поряд із кодом, який стверджує, що елемент має ширину 100%, викликаючи елемент загальною шириною 112% розміру екрана. Щоб виправити це, або видаліть прокладку, замініть прокладку з запасом 12% для того ж ефекту або змініть ширину (або максимальну ширину) елемента на 88%. Це відбувається у main.css у рядку 343. Сподіваюся, це допомагає!

— HippoRustler
джерело
Або встановіть box-sizingвластивість на border-box.
— Бенпай
2

У мене було те саме питання, тому спробував кілька речей. Одне з яких, здавалося, працює для мене - видалення ширини та додавання поплавця до тегу body.

Може працювати не для всіх примірників, але в сценарії, який я нещодавно мав, приховування переповнення елементів вмісту було бездоганним ...

— світилоедизайн
джерело
Мені довелося встановити html, тіло на ширину: 0, щоб позбутися від привидного елемента вгорі на Firefox.
— Гаравани
1

Я відчував білу лінію праворуч на своєму iPad, а також у горизонтальному положенні. Я використовував div з фіксованою позицією з фоном, встановленим у ширину 960px та z-індексом -999. Цей конкретний div відображається лише на iPad через медіа-запит. Потім вміст помістили в обгортку з розширенням 960 пікселів. Відповіді на цій сторінці не допомогли в моєму випадку. Щоб виправити проблему з білою смугою, я змінив ширину обгортки вмісту на 958 пікс. Войла. Більше не біла права біла смуга на iPad у горизонтальному положенні.

— modern4life
джерело
1

Це питання довгий час зависало, але жоден з виправлень, які я міг знайти, не працював на мене (маючи ту ж проблему, що і в ipad), але мені вдалося вирішити власне рішення, яке повинно працювати для більшості людей, які я собі уявляю.

Ось мій код:

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

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

— Майкл
джерело
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.