Ist es möglich, die Ansichtsfensterbreite (vw) ohne Bildlaufleiste zu berechnen?

82

Ist es, wie im Titel erwähnt, möglich, die vwohne Bildlaufleisten nur in CSS zu berechnen ?

Zum Beispiel hat mein Bildschirm eine Breite von 1920px. vwkehrt zurück 1920px, großartig. Aber meine tatsächliche Körperbreite ist nur so etwas wie 1903px.

Gibt es eine Möglichkeit für mich, den 1903pxWert nur mit CSS abzurufen (nicht nur für direkte Kinder von body), oder benötige ich dafür unbedingt JavaScript?

Marten Zander
quelle
2
aber ... die Bildlaufleiste ist nicht in der Breite des Ansichtsfensters enthalten!?
Danield
@ Danield Entschuldigung, ich habe meine Frage aktualisiert
Marten Zander
Wenn es sich um eine künstliche Bildlaufleiste handelt, die Sie dort platzieren, suchen Sie vielleicht nach etwas Ähnlichem: width: calc(100vw - scrollbarWidth)wobei 'scrollbarWidth' ein fester Wert wie 15px ist
Danield
@ Danield Ich brauche tatsächlich einen browserübergreifenden Fix, bei dem ich die variable Breite jedes nativen Browser-Scrollers habe
Marten Zander
2
Ich arbeite derzeit an einer Seite mit Bootstrap 4 in Chrome v64 und% ist die innere Breite (ohne Bildlaufleiste) und vw ist die äußere Breite (Breite einschließlich Bildlaufleiste) - daher kann ich vw nicht verwenden und wie das OP nicht Ich verstehe nicht, warum es passiert.
Eric_B

Antworten:

112

Eine Möglichkeit, dies zu tun, ist mit calc. Soweit ich weiß, ist 100% die Breite einschließlich Bildlaufleisten. Wenn Sie dies tun:

body {
  width: calc(100vw - (100vw - 100%));
}

Sie erhalten 100vw abzüglich der Breite der Bildlaufleiste.

Sie können dies auch mit der Höhe tun, wenn Sie ein Quadrat möchten, das beispielsweise 50% des Ansichtsfensters ausmacht (minus 50% der Breite der Bildlaufleiste).

.box {
  width: calc(50vw - ((100vw - 100%)/2))
  height: 0
  padding-bottom: calc(50vw - ((100vw - 100%)/2))
}  
Mattias Ottosson
quelle
40
Dies ist erstaunlich, funktioniert aber leider nur, wenn das Element, dessen Größe Sie festlegen, das direkte untergeordnete bodyElement ist oder ein Element mit der gleichen Breite wie body(andernfalls 100%wird auf die Breite des falschen Elements verwiesen). In diesem Fall können Sie einfach Prozentsätze verwenden. Es sei denn, ich vermisse etwas?
Nateowami
7
Ist nicht in Ordnung für Fälle, in denen die Berücksichtigung der Bildlaufleiste bei 100 VW wirklich ein Problem darstellt, dh wenn Sie einen 100 VW-Block in einen Container mit fester Breite einfügen müssen.
sicherlich am
52
Mathe: 100vw - (100vw - 100%) = 100vw - 100vw + 100% = 100% vermisse ich etwas?
Kamil Kiełczewski
3
Leider würde dies für absolut positionierte Elemente nicht funktionieren, da dort 100% nicht verfügbar sind :(
Hrvoje Golcic
4
@TKoL In jedem Fall, in dem seine Lösung das Problem tatsächlich lösen würde, würde Breite: 50% genauso gut funktionieren. Kamil Kiełczewski hat recht, diese Lösung ist nutzlos.
Elieser Berlin
14

Dazu füge ich eine Zeile Javascript hinzu, um eine CSS-Variable zu definieren, sobald das Dokument geladen wurde:

document.documentElement.style.setProperty('--scrollbar-width', (window.innerWidth - document.documentElement.clientWidth) + "px");

Im CSS können Sie dann var(--scrollbar-width)Anpassungen vornehmen, die Sie für verschiedene Browser mit / ohne Bildlaufleisten unterschiedlicher Breite benötigen. Sie können bei Bedarf etwas Ähnliches für die horizontale Bildlaufleiste tun, indem Sie die innerWidthmit innerHeightund clientWidthmit ersetzen clientHeight.

user11990065
quelle
Für mich ist die Größe, die dies zurückgibt, doppelt so groß wie nötig. Irgendwelche Hinweise? Gibt mir 16px, aber 8px wäre genug ...
Fabian Beyerlein
9

Gemäß den Spezifikationen berücksichtigen die Einheiten der relativen Länge des Ansichtsfensters keine Bildlaufleisten (und nehmen tatsächlich an, dass sie nicht vorhanden sind).

Unabhängig von Ihrem beabsichtigten Verhalten können Sie bei Verwendung dieser Einheiten keine Bildlaufleisten berücksichtigen.

Madaras Geist
quelle
Auch hier vwist laut Spezifikation keine Existenz einer Bildlaufleiste bekannt. Sie können sie also nicht berücksichtigen.
Madaras Geist
1
Gemäß den Spezifikationen nimmt vw die Breite der Bildlaufleiste weg, WENN der Überlauf nicht automatisch aktiviert ist, funktioniert er für den vw-Wert wie "versteckt". Wenn die Seite überlaufen muss, setzen Sie sie auf "Scrollen". Mit overflow-x & overflow-y wählen Sie aus, welche Bildlaufleiste angezeigt werden soll.
Kulvar
1
@ Kulvar hat es gerade in Chrom versucht. Wenn Sie den Körper auf overflow-y: scrollvs setzen overflow-y: auto, scheint sich der berechnete Wert für vw-Einheiten nicht zu ändern. Insbesondere habe ich auf meiner Website etwas auf 3,82 VW eingestellt, und meine Computerbreite beträgt 1920 Pixel. Mit Überlauf Auto, 3.82vw = 73.344px, und dann habe ich versucht, mit Überlauf Scroll, die auch 73.344px ausgibt, keine Änderung, wenn es tatsächlich 72.6946px ausgeben sollte, wenn Sie richtig waren
TKoL
100% berücksichtigt Bildlaufleisten. Wenn Ihr Fall also 100vw ist, ändern Sie ihn, wenn Sie können, in 100%
Jairo
3

Webkit-Browser schließen die Bildlaufleisten aus, andere enthalten sie in der zurückgegebenen Breite. Dies kann natürlich zu Problemen führen: Wenn Sie beispielsweise dynamisch Inhalte mit Ajax generiert haben, die die Höhe dynamisch erhöhen, wechselt Safari möglicherweise während der Seitenvisualisierung von einem Layout zu einem anderen ... Ok, das kommt nicht oft vor, aber es ist etwas zu tun sei dir bewusst. Auf Mobilgeräten werden weniger Probleme angezeigt, da Bildlaufleisten im Allgemeinen nicht angezeigt werden.

Das heißt, wenn Ihr Problem darin besteht, die Breite des Ansichtsfensters ohne Bildlaufleisten in allen Browsern genau zu berechnen, ist dies meines Wissens eine gute Methode:

width = $('body').innerWidth();

zuvor eingestellt:

body {
    margin:0;
}
gehalten
quelle
2

Das vwGerät berücksichtigt die overflow-yBildlaufleiste nicht, wenn sie auf eingestellt overflow-yist auto.

Ändern Sie es in overflow-y: scroll;und das vwGerät ist das Ansichtsfenster ohne Bildlaufleiste.

Einziger Nachteil zu berücksichtigen. Wenn der Inhalt in den Bildschirm passt, wird die Bildlaufleiste trotzdem angezeigt. Mögliche Lösung ist der Wechsel von autozu scrollin Javascript.

Ilario Engler
quelle
1
meinst du overflow-x?
Eliran Malka
Das ist nicht wahr. Die vw-Einheit enthält eine Bildlaufleiste mitoverflow-y: scroll;
NoSkill
0

Die einzige Möglichkeit, wie ich fand, dass es funktioniert, ohne Ihren Code mit "calc" zu verwechseln, besteht darin, die Größe des Containerelements auf 100vw zu bringen. Hinzufügen eines Wrappers um den Container für Überlauf-x; Dadurch wird der Container auf die volle Breite eingestellt, als ob sich die Bildlaufleiste über dem Inhalt befindet.

<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
	html{ overflow-y: scroll; }
	html, body{ padding:0; margin: 0;}
	#wrapper{ overflow-x: hidden; }
	.row{ width: 100vw; }
	.row:after{ clear: both; content: ''; display: block; overflow: hidden; }
	.row-left{ background: blue; float: left; height: 40vh; width: 50vw; }
	.row-right{ background: red; float: right; height: 40vh; width: 50vw; }
	</style>
</head>
<body>

<div id="wrapper">
<div class="row">
	<div class="row-left"></div>
	<div class="row-right"></div>
</div>
</div>


</body>
</html>

SequenceDigitale.com
quelle
0

Wenn der Fall einem Schieberegler ähnlich wäre: Wie in vielen Antworten angegeben, berücksichtigt die Breite 100% die Bildlaufleiste nicht, während 100vw dies tut. Wenn Sie viele Elemente haben, die die Breite des Fensters annehmen müssen und die in einem Container verschachtelt sind, der bereits 100% Fensterbreite hat (oder dessen natürliche Blockbreite dies wäre), können Sie Folgendes verwenden:

  • Anzeigeflex für Container
  • Flex: 0 0 100% für untergeordnete Elemente
Facundo Videla Peña
quelle
-3

Der einfachste Weg ist, HTML & Body auf 100vw zu setzen:

html, body{ width:100vw; overflow-x: hidden; overflow-y: auto; margin: 0; }

Das einzige Problem ist, dass das Bild ganz rechts ein wenig abgeschnitten wird, wenn die Bildlaufleiste angezeigt wird.

Gonnavis
quelle
-3

In meinem Fall muss ich einen Div 100wh - 230px einstellen und ich hatte das gleiche Problem mit dieser zusätzlichen Bildlaufbreite, was ich getan habe:

width: calc(100vw - (100vw - 100%) - 230px);
Omar Errabaany
quelle
-4

Dies ist nicht meine Lösung, hilft mir jedoch dabei, ein Dropdown-Menü mit voller Breite und einem absoluten relativen Element zu erstellen, das nicht vollständig ist.

Wir sollten in css var in: root scrollen und es dann verwenden.

:root{
 --scrollbar-width: calc(100vw - 100%);
}


div { margin-right: var(--scrollbar-width); }

https://codepen.io/superkoders/pen/NwWyee

Denis Savenko
quelle
2
Dies funktioniert nur, weil sich das div an der Wurzel befindet. Wenn das Div nicht an der Wurzel ist, bricht es. Dies liegt daran, dass calc aufgelöst wird, wenn auf es verwiesen wird, relativ zu dem Selektor, auf den es verweist, und nicht dort, wo es definiert ist. codepen.io/Pedr/pen/YorLPM
Undistraction