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?
width: calc(100vw - scrollbarWidth)wobei 'scrollbarWidth' ein fester Wert wie 15px ist
Antworten:
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))
}
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?
100vw - (100vw - 100%) = 100vw - 100vw + 100% = 100% vermisse ich etwas?
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.
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.
vwist laut Spezifikation keine Existenz einer Bildlaufleiste bekannt. Sie können sie also nicht berücksichtigen.
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
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;
}
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.
overflow-x?
overflow-y: scroll;
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>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:
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);
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); }