100vw verursachen horizontalen Überlauf, aber nur wenn mehr als einer?

89

Angenommen, Sie haben Folgendes:

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

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

Sie erhalten etwas, das den Bildschirm ausfüllt, keine Bildlaufleisten. Aber fügen Sie noch eine hinzu:

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

Sie erhalten nicht nur vertikale Bildlaufleisten (erwartet), sondern auch eine leichte horizontale Bildlaufleiste.

Mir ist klar, dass Sie die Breite weglassen oder auf width einstellen können: 100%, aber ich bin gespannt, warum dies geschieht. Soll 100vw nicht "100% der Breite des Ansichtsfensters" sein?

css rdoyle720
quelle
Vermeiden Sie Überlauf auf HTML und Körper versteckt. Es ist keine gute Lösung, wenn Sie die Position klebrig auf einem der untergeordneten Elemente verwenden möchten. Die maximale Breite scheint ein guter Weg zu sein.
Neue Deutsche

Antworten:

137

Wie bereits in wf4 erläutert, ist die horizontale Schriftrolle aufgrund der vertikalen Schriftrolle vorhanden. was du lösen kannst, indem du gibst max-width: 100%.

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

Geige arbeiten

Herr Green
quelle
2
Vielen Dank, dies funktioniert gut, um das Problem zu beheben, aber ich denke immer noch, dass es ein wenig unintuitives Standardverhalten ist.
Phocks
2
Unintuitiv sein: Laut caniuse.com ist dies ein Browser-Fehler. caniuse.com/#feat=viewport-units -> Bekanntes Problem 8: Derzeit betrachten alle Browser außer Firefox 100vw fälschlicherweise als die gesamte Seitenbreite, einschließlich der vertikalen Bildlaufleiste, was zu einer horizontalen Bildlaufleiste führen kann, wenn Überlauf: Auto eingestellt ist .
Jacob van Lingen
41
Wenn max-width: 100%die Breite des Ansichtsfensters ohne Bildlaufleisten ist, dann brauchten Sie das überhaupt nicht 100vw:-) Sie könnten es nur verwenden, width: 100%weil das Element keinen positionierten Vorfahren hat, also ist seine Referenz der Körper.
Kapsel
1
@ Kissaki mein Kommentar ist immer noch korrekt. Die ursprüngliche Frage betraf ein Element, das 100% der verfügbaren Breite abdeckt. Sie brauchen die vw-Einheit immer noch nicht, um dies zu erreichen, wenn Ihr Element ein direktes Kind des Körpers ist. Das Subtrahieren der Bildlaufleisten, wenn sie sichtbar sein müssen, ist sinnvoll, da das Ansichtsfenster IMMER ohne die verfügbare Breite der Bildlaufleiste angezeigt wird, aber ja, nicht ideal.
Kapsel
5
Das löst nichts! max-width funktioniert nur, weil das Element ein direkter Nachkomme des Körpers ist! In jedem realen Fall, in dem Sie 100vw anstelle von 100% verwenden würden (z. B. ein Element in einem Container), funktioniert dies nicht.
Eliezer Berlin
36

Bildlaufleisten werden in die Liste aufgenommen, vwsodass die horizontale Bildlaufleiste hinzugefügt wird, damit Sie unter der vertikalen Bildlaufleiste sehen können.

Wenn Sie nur 1 Box haben, ist diese 100% breit und 100% hoch. Sobald Sie 2 hinzufügen, ist es 100% breit und 200% hoch, wodurch die vertikale Bildlaufleiste ausgelöst wird. Wenn die vertikale Bildlaufleiste ausgelöst wird, wird die horizontale Bildlaufleiste ausgelöst.

Sie könnten hinzufügen overflow-x:hiddenzubody

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
quelle
1
Dadurch wird der Inhalt unter der Bildlaufleiste angezeigt. jsfiddle.net/NBzVV/1 Damit dies eine geeignete Problemumgehung darstellt , müssen Sie die richtige Polsterung hinzufügen.
James Donnelly
1
Ja, gut gesehen. Durch Hinzufügen max-width:100%zu .boxwird dies verhindert.
wf4
4
"Also wird die horizontale Schriftrolle hinzugefügt, damit Sie unter der vertikalen Schriftrolle sehen können." <- Dieser Satz half meinem Gehirn, visuell zu verstehen, was wirklich vor sich ging. +1
Ivan Durst
Nur eine Anmerkung darüber, overflowauch wenn Sie es dem hinzufügen, wird xkeines der postition: stickyDinge funktionieren.
T.Chmelevskij
6

Ich hatte ein ähnliches Problem und fand die folgende Lösung unter Verwendung von JS- und CSS-Variablen.

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 ist ein Fallback-Wert.

Stepan Shatkovski
quelle
Ich liebe das. ziemlich elegant
andrevenancio
Dies ist perfekt, da es dann global verfügbar ist. Danke dir.
fvaldez421
2

Update: Ab Chrome Version 66 kann ich das von der Frage gemeldete Verhalten nicht mehr reproduzieren. Es scheint keine Problemumgehung erforderlich zu sein.

Ursprüngliche Antwort

Dies ist tatsächlich ein Fehler, wie in dieser Antwort und den obigen Kommentaren berichtet.

Während die Problemumgehung in der akzeptierten Antwort (Hinzufügen .box {max-width: 100%;}) im Allgemeinen funktioniert, finde ich es bemerkenswert, dass sie derzeit nicht funktioniert display:table(in Chrome getestet). In diesem Fall ist die einzige Problemumgehung, die ich gefunden habe, die Verwendung width:100%stattdessen.

Cornflex
quelle
Ähm, hat sich die akzeptierte Antwort geändert? Sie schlagen dasselbe vor wie die akzeptierte Antwort. Aus diesem Grund sollten die Antworten von selbst vollständig sein.
Kissaki
Die akzeptierte Antwort schlägt das Hinzufügen vor max-width: 100%. Ich schlug vor Wechsel width: 100vwzu width: 100%. Ich habe meine Antwort aktualisiert, um in sich geschlossen zu sein.
Cornflex
Neben Chrome gibt es noch andere Browser, und einige behandeln die Bildlaufleiste anders.
LocalPCGuy
1

Um die in vw enthaltene Breite der Bildlaufleiste loszuwerden, musste ich Folgendes tun:

html, body {
    overflow-x: hidden;
    height: 100vh;
}
manuel-84
quelle
0 
*,
html,
body {
  margin: 0;
  padding: 0;
  overflow: hidden;/*add This*/ 
}
/*and enjoy ^_^ */
user13149444
quelle
5
Das Ausblenden eines Problems löst es nicht. Während Ihr Ansatz tatsächlich den Überlauf entfernt, verbirgt er ihn einfach. Dies kann zu Problemen führen, wenn Inhalte außerhalb angezeigt werden sollen (aus welchen Gründen auch immer)
Daniel Steiner,
2
Hey user13149444! Nur-Code-Antworten können das Problem lösen, aber sie sind viel nützlicher, wenn Sie erklären, wie sie es lösen. Community erfordert sowohl Theorie als auch Code, um Ihre Antwort vollständig zu verstehen.
RBT