100vw yatay taşmaya neden oluyor, ancak yalnızca birden fazla olması durumunda?

97

Bunun sende olduğunu söyle:

html, body {margin: 0; padding: 0}
.box {width: 100vw; height: 100vh}

<div class="box">Screen 1</div>

Kaydırma çubukları olmadan ekranı dolduran bir şey alacaksınız. Ama bir tane daha ekleyin:

<div class="box">Screen 1</div>
<div class="box">Screen 2</div>

Yalnızca dikey kaydırma çubuklarını (beklenen) değil, aynı zamanda hafif bir yatay kaydırma da elde edersiniz.

Genişliği atlayabileceğinizi veya genişlik olarak ayarlayabileceğinizi fark ettim:% 100, ama bunun neden olduğunu merak ediyorum. 100vw'nin "görüntü alanı genişliğinin% 100'ü" olması gerekmiyor mu?

css

— rdoyle720
kaynak

html ve body'de gizli olan taşmayı önleyin, eğer konum yapışkanını alt öğelerinden herhangi birinde kullanmak istiyorsanız, bu iyi bir çözüm değildir ... max-width iyi bir yol gibi görünüyor !!!

— NeueDeutsche

148

Daha önce wf4'te açıklandığı gibi, dikey kaydırma nedeniyle yatay kaydırma mevcuttur. vererek çözebilirsin max-width: 100%.

.box {
    width: 100vw;
    height: 100vh;
    max-width:100%;  /* added */
}

Çalışma Keman

— Bay Yeşil
kaynak

3

Teşekkürler, bu sorunu çözmek için iyi çalışıyor, ancak yine de biraz sezgisel olmayan varsayılan bir davranış olduğunu düşünüyorum.

— phocks

2

Sezgisel olmama hakkında: caniuse.com'a göre bu bir tarayıcı hatasıdır. caniuse.com/#feat=viewport-units -> Bilinen sorun 8: Şu anda Firefox dışındaki tüm tarayıcılar yanlış bir şekilde 100vw'yi dikey kaydırma çubuğu dahil tüm sayfa genişliği olarak kabul ediyor, bu da taşma olduğunda yatay bir kaydırma çubuğuna neden olabilir: otomatik ayarlandığında .

— Jacob van Lingen

46

Eğer max-width: 100%kaydırma çubukları olmadan görüntü alanının genişliği, o zaman gerek yoktu 100vwilk etapta :-) sadece kullanımı olabilir width: 100%eleman herhangi konumlandırılmış atası olmadığı için referans organıdır yüzden.

— Kapsül

7

Bu hiçbir şeyi çözmez! max-width, yalnızca eleman vücudun doğrudan bir belirleyicisi olduğu için çalışır! % 100 yerine 100vw kullanacağınız herhangi bir gerçek dünya durumunda (bir kabın içindeki bir öğe gibi), bu işe yaramaz.

— Eliezer Berlin

2

Div'im genişliğini veya dolgusunu bilmediğim bir kapsayıcıda olduğundan genişliği% 100 kullanamıyorum. % 100 yerine 100vw kullanmanın tek nedeni budur, bu yüzden bu cevap anlamsızdır. Ve Mac'te, kaydırma çubuğu olmasa bile ayarınız her zaman kaydırma çubuklarını gösterecekse de olur.

— Curtis

37

Kaydırma çubukları vw, dikey kaydırmanın altını görmenizi sağlamak için yatay kaydırma eklenecek şekilde eklenecektir.

Yalnızca 1 kutunuz olduğunda,% 100 geniş x% 100 boyundadır. 2 eklediğinizde,% 100 genişliğinde x% 200 yüksekliğinde, dolayısıyla dikey kaydırma çubuğunu tetikler. Dikey kaydırma çubuğu tetiklendiğinde, bu daha sonra yatay kaydırma çubuğunu tetikler.

Sen ekleyebilir overflow-x:hiddeniçinbody

html, body {margin: 0; padding: 0; overflow-x:hidden;}
.box {width: 100vw; height: 100vh; background-color:#ff0000}
.box2 {width: 100vw; height: 100vh; background-color:#ffff00}

http://jsfiddle.net/NBzVV/

— wf4
kaynak

1

Bunu yapmak, içeriğin kaydırma çubuğunun altında görünmesine neden olur. jsfiddle.net/NBzVV/1 Bunun uygun bir geçici çözüm olması için doğru dolgu eklemeniz gerekir.

— James Donnelly

1

Evet, iyi tespit edildi. Ekleme max-width:100%için .boxbu önleyecektir.

— wf4

4

"böylece dikey kaydırma altında görmenizi sağlamak için yatay kaydırma eklenecek" <- bu cümle beynimin gerçekte neler olup bittiğini görsel olarak anlamasına yardımcı oldu. +1

— Ivan Durst

Sadece bir not ekleseniz overflowbile xhiçbir postition: stickyşey işe yaramayacaktır.

— T.Chmelevskij

8

Benzer bir sorun yaşadım ve JS ve CSS değişkenlerini kullanarak aşağıdaki çözümü buldum.

JS:

function setVw() {
  let vw = document.documentElement.clientWidth / 100;
  document.documentElement.style.setProperty('--vw', `${vw}px`);
}

setVw();
window.addEventListener('resize', setVw);

CSS:

width: calc((var(--vw, 1vw) * 100);

1vw bir geri dönüş değeridir.

— Stepan Shatkovski
kaynak

Bunu sev. oldukça zarif

— andrevenancio

Bu mükemmel çünkü o zaman dünya çapında mevcut. Teşekkür ederim.

— fvaldez421

2

Güncelleme: Chrome 66 sürümünden itibaren, soru tarafından bildirilen davranışı artık yeniden oluşturamıyorum. Çözüm gerekli görünmüyor.

Orijinal Cevap

Bu aslında bu cevapta ve yukarıdaki yorumlarda bildirilen bir hatadır .

Kabul edilen cevaptaki (ekleme .box {max-width: 100%;}) geçici çözüm genel olarak işe yarasa da, şu anda çalışmadığını kayda değer buluyorum display:table(Chrome'da test edilmiştir). Bu durumda, bulduğum tek çözüm width:100%bunun yerine kullanmaktır .

Fiddle Broken iledisplay:table
Fiddle Çalışma ile display:tablevewidth:100%

— Cornflex
kaynak

Uhm, kabul edilen cevap değişti mi? Kabul edilen cevapla aynı şeyi öneriyorsun. Bu nedenle cevaplar kendi başlarına tamamlanmalıdır.

— Kissaki

Kabul edilen cevap eklemeyi önerir max-width: 100%. Ben değişen önerdi width: 100vwetmek width: 100%. Cevabımı kendi kendine yetecek şekilde güncelledim.

— Cornflex

Chrome dışında başka tarayıcılar da var ve bazıları kaydırma çubuğunu farklı şekilde ele alıyor.

— LocalPCGuy

1

vw'de bulunan kaydırma çubuğu genişliğinden kurtulmak için şunu yapmam gerekiyordu:

html, body {
    overflow-x: hidden;
    height: 100vh;
}

— manuel-84
kaynak

1

*,
html,
body {
  margin: 0;
  padding: 0;
  overflow: hidden;/*add This*/ 
}
/*and enjoy ^_^ */

— user13149444
kaynak

5

Bir sorunu gizlemek onu çözmez. Yaklaşımınız taşmayı gerçekten ortadan kaldırsa da, onu basitçe gizler. Bu, içeriğin dışarıda görüntülenmesi gerektiğinde sorunlara neden olabilir (nedeni ne olursa olsun)

— Daniel Steiner

2

Hey user13149444! Yalnızca kod yanıtları sorunu çözebilir, ancak nasıl çözdüklerini açıklarsanız çok daha yararlıdır. Toplum, cevabınızı tam olarak anlamak için hem teori hem de kod gerektirir.

— MHK