Arka plan resminin sayfanın tam uzunluğunu uzatması gerektiğinde sayfanın sağ tarafında görünen beyaz boşluk [kapalı]

110

Web sayfamızın arka plan resimlerimiz, FireFox'ta ve iPad / iPhone'larda iOS'ta Safari'de sorun yaşıyor ve sayfanın sağ tarafında beyaz alan görünüyor.

Arka plan resimleri diğer tarayıcılarda iyi bir şekilde uzanır, ancak bu tarayıcılarda tarayıcının tüm uzunluğunu genişletmekte güçlük çekiyoruz.

Ne demek istediğimi görmek için FireFox'taki sitemize bir göz atın .

html css

— Dave
kaynak

Önyükleme veya temel gibi bir çerçeve kullanıyorsanız, şimdi sütunun body'nin ilk alt öğesi olduğunu, ancak bir tür dolgusu olan başka bir div'in içinde (küçük-12 fe) yuvalanmış olduğunu kontrol edin.

— Lightningsoul

@Dave'i çözdün mü?

— gumuruh

Çılgın, değil mi? 6 yıl sonra ve iOS Safari hala bu sorunu gösteriyor. Çok sayıda CSS çözümünü denedim, ancak sonunda jQuery'yi kullanmak zorunda kaldım. stackoverflow.com/a/45009357/391605

— Mike Gledhill

266

Ekledim:

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

CSS'nize diğer sınıfların en üstünde yerleştirdik ve sorununuzu çözmüş görünüyordu.

Güncellenmiş .css dosyanız burada mevcuttur

— Rion Williams
kaynak

4

harika, bu beni bir süredir rahatsız eden bir hatayı düzeltti!

— gleddy

22

Safari iphone'da bu kodla gezinirken sorun yaşadım, çok yavaşladı. Sonunda, yükseklik:% 100 ve taşma-x: gizli kombinasyonunun olduğunu buldum, bu yüzden yüksekliği kaldırdım:% 100 ve çok daha iyi çalışıyor.

— Paul Mason

Teşekkürler, bu harika çalıştı. Neredeyse sonsuz kaydırma çubuğunu nasıl kullanacağımı hep merak etmişimdir. Bunun neden bir cevap olarak işaretlenmediğinden emin değilim.

— isurf çünkü

5

Bootstrap'in 'row' sınıfının sayfamda buna neden olan bir {margin-right: -15px} verdiğini buldum.

— JosephK

2

@ JosephK'e göre, bu sorun genellikle birbirini mükemmel bir şekilde dengelemek için dolgu ve negatif kenar boşlukları kullanan Bootstrap'in konteyner, satır ve sütun nesnelerinin yanlış kullanımından kaynaklanır, ancak YALNIZCA birlikte düzgün KULLANILDIĞINDA. Aksi takdirde kırılır! Tecrübelerime göre, bu sağ taraftaki beyaz boşluğun en yaygın nedenlerinden biridir. BRILLIANT için, Bootstrap için konteyner, satır ve sütunun görsel açıklaması, bu ve diğer sorunların bir tartışması dahil, şunu okuyun (hayır, ben yazmadım): helloerik.com/…

— james

133

Ghost CSS Elements için CSS'nizde hata ayıklayın.

CSS'nizde hata ayıklamak için bu yer işaretini kullanın: https://blog.wernull.com/2013/04/debug-ghost-css-elements-causing-unwanted-scrolling/

Veya CSS'yi doğrudan kendiniz ekleyin:

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

Benim durumumda bir Facebook Beğen Düğmesi soruna neden oldu.

— optimiertes
kaynak

1

bu gerçekten

— işe yaradı

6

Mükemmel çözüm! Bu, sorunun kökenini bulmanıza ve doğru bir şekilde düzeltmenize yardımcı olacaktır ve tek gereken birkaç satır css'dir.

— opdb

3

Bu kabul edilen cevap IMO olmalıdır. Bahse girerim, çoğu insan 100vw'yi bir şeyin genişliği olarak kullandı ve sonuç olarak bu hatayı aldı. Sadece taşmayı gizlemek, optimal olmayan bir çözümdür.

— Luke

Bu etkileyici, o lanet olası beyaz alanda 2 saat geçirdi, bu sorunu çözdü.

— Carlos Roso

Vay canına, çok saat harcadım ve suçluyu sadece birkaç satır kodla buldum. Teşekkürler dostum :)

— Khpalwalk

55

Burada sağlanan yararlı stratejilerden bazılarını inceledikten sonra, yalnızca iOS'a özgü CSS eklemem gerektiğini fark ettim (bunu ana css sayfamın altına koydum.) Taşma-x'i gizlemek benim için cevapmış gibi görünüyor. İçeriğimin genişlemesi durumunda genişliği% 100 olarak belirtmenin yardımcı olduğunu varsayıyorum. Bu sorunu yalnızca iOS'ta yaşadığımı belirtmek gerekir. Firefox'ta da bulunuyorsa, @media özellikle mobil cihazları hedeflediği için muhtemelen yalnızca html ve gövde bloğu kullanılmalıdır.

@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;
  }

}

Bu kimseye yanlış geliyorsa lütfen beni bilgilendirin :)

— Jon Ryser
kaynak

5

— Sorunumu

1

Teşekkürler - benim için en iyi düzeltme. Oldukça da

— göze batmayan

Bu sorunu çözer ve mobil beyaz alan için mantıklıdır

— Rob Gleeson

Uyguladıktan sonra, Safari iphone6'lerde gezinmek gecikmeli hale geliyor. Mobil Safari'nin sorunsuz çalışmasını sağlamak için ek bir özelliği mi eksik?

— Erik Rybalkin

benim için en iyi cevap !!

— Youssef Boudaya

28

Bu oldukça eski bir soru, ama 2 sentimi de eklemeyi düşündüm. Gelecekte kullanmak için kesinlikle biriktireceğim hayalet css dahil olmak üzere yukarıdaki çözümleri denedim. Ama bunların hiçbiri benim durumumda işe yaramadı. Sorunumu şu şekilde çözdüm. Umarım bu başka birine yardımcı olur.

Denetçiyi açın (veya tercihiniz ne olursa olsun) ve body etiketindeki ilk div ile başlayarak, display: none;yalnızca o öğeye ekleyin . Kaydırma çubuğu kaybolursa, o öğenin soruna neden olan öğeyi içerdiğini bilirsiniz. Ardından, ilk css kuralını kaldırın ve içeren öğeye bir seviye aşağı gidin. Css'yi bu div'e ekleyin ve kaydırma çubuğu kaybolursa, bu öğenin sorun teşkil eden öğeye neden olduğunu veya bu öğeyi içerdiğini bilirsiniz. CSS eklemek hiçbir şey yapmazsa, soruna neden olanın div olmadığını ve buna kaptaki başka bir div'in neden olduğunu ya da kabın kendisi neden olduğunu bilirsiniz.

Bu, bazıları için çok zaman alıcı olabilir. Şanslıyım, sorunum başlıktaydı, ancak sorununuz altbilgide veya başka bir şeyde söyleniyorsa bunun biraz zaman aldığını tahmin edebiliyorum.

— tire
kaynak

Bu yöntem hatayı bulmama yardımcı oldu teşekkürler

— Bill

Evet, ya da en yüksek seviyedeki div'leri tek tek

— saklayarak doma girebilirsin

height: 0Veya ile olanlar gibi tuhaf unsurlara sahip olduğunuzda kök problemini başarılı bir şekilde çözmenin tek yolu budur height: 1. Benim durumumda, sebebin Drupal 7 çekirdeğinde hatalı bir 'görünmez' sınıf olduğunu buldum: drupal.org/node/2664214

— geerlingguy

10

overflow-x: hidden; benim için mükemmel çalışıyor.

— Hom
kaynak

5

Sorun dosyada:

style.css - satır 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;
}

satırları kaldırın:

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

Bu, temelde yalnızca altbilgiye bir gölge gradyanı verir. Firefox'ta soruna neden olan ilk satırdır.

— dmin
kaynak

2

Ayrıca aynı sorunu yaşadım ( Web sitesi gövdesi arka planı iPhone Safari'de sağ beyaz bir kenar boşluğu oluşturuyordu ) ve arka plan resmini<html> etikete .

Önce

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

Sonra

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

— Xavi Esteve
kaynak

2

Görünüşe göre (-o-min-cihaz-piksel oranı: 3/2) sorunlara neden oluyor. Test sitemde sağ tarafın kesilmesine neden oluyordu. Github'da şimdilik çalışan bir geçici çözüm buldum . (-O-min-cihaz-piksel oranı: ~ "3/2") kullanılması iyi çalışıyor gibi görünüyor.

— Lu R.
kaynak

2

Sorunun genel bir standarda yanıtlandığını görüyorum, ancak sitenize baktığımda hala yatay bir kaydırma çubuğu olduğunu fark ettim. Bunun nedenini de fark ettim: Kodu kullandınız:

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

Bu, öğenin% 100 genişliğe sahip olduğunu belirten kodla birlikte kullanılmakta olup, toplam genişliği ekran boyutunun% 112'si kadar olan bir öğeye neden olmaktadır. Bunu düzeltmek için, dolguyu kaldırın, dolguyu aynı efekt için% 12'lik bir kenar boşluğuyla değiştirin veya öğenin genişliğini (veya maksimum genişliğini)% 88 olarak değiştirin. Bu 343. satırda main.css'de meydana gelir. Bunun yardımcı olacağını umuyoruz!

— HippoRustler
kaynak

Veya box-sizingözelliği olarak ayarlayın border-box.

— Benpai

2

Aynı sorunu yaşadım, bu yüzden birkaç şey denedim. Bunlardan biri benim için işe yaradı - genişliği kaldırıp gövde etiketine bir kayan nokta eklemek.

Tüm örnekler için işe yaramayabilir, ancak son zamanlarda yaptığım senaryoda, içerik öğelerinde taşmayı gizlemek mümkün değildi ...

— luminancedesign
kaynak

Firefox'ta üstteki hayalet öğeden kurtulmak için html, body to width: 0 ayarlamam gerekiyordu.

— Garavani

1

Sağdaki beyaz çizgiyi iPad'imde ve yalnızca yatay konumda tecrübe ediyordum. Arka planı 960 piksel genişliğe ve -999 z-endeksine ayarlanmış sabit konumlu bir div kullanıyordum. Bu belirli div, bir medya sorgusu nedeniyle yalnızca bir iPad'de görünür. İçerik daha sonra 960 piksel genişliğindeki bir div sarmalayıcıya yerleştirildi. Bu sayfada verilen cevaplar benim durumumda yardımcı olmadı. Beyaz şerit sorununu çözmek için içerik sarmalayıcının genişliğini 958 piksel olarak değiştirdim. Voila. İPad'de yatay konumda artık beyaz sağ beyaz şerit yok.

— modern4life
kaynak

1

Bu soru bir süredir ortalıkta dolaşıyordu, ancak bulabildiğim düzeltmelerin hiçbiri benim için işe yaramadı (ipad ile aynı sorunu yaşıyorum), ancak hayal ettiğim çoğu insan için çalışması gereken kendi çözümümü yönettim.

İşte kodum:

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

Zevk almak!

— Michael
kaynak