2015-11-09 17 views
13

Wie im Titel erwähnt, ist es möglich, die vw ohne die Bildlaufleisten in nur css zu berechnen?Ist es möglich, die Ansichtsfensterbreite (vw) ohne Bildlaufleiste zu berechnen?

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

Gibt es eine Möglichkeit für mich, die 1903px Wert nur mit CSS (nicht nur für direkte Kinder der body) abrufen, oder brauche ich unbedingt JavaScript dafür?

+1

aber ... die Bildlaufleiste ist nicht in der Breite des Darstellungsbereichs enthalten !? – Danield

+0

@Danield, normalerweise nicht. Wenn es ist, ist es normalerweise eine, die verschwindet, wenn nicht gescrollt wird, also ist die Frage ziemlich sinnlos. –

+0

@Daniel entschuldigung, ich habe meine Frage aktualisiert –

Antwort

0

Gemäß the specs berücksichtigen die relativen Längeneinheiten des Ansichtsfensters nicht die Bildlaufleisten (und nehmen tatsächlich an, dass sie nicht existieren).

Was auch immer Ihr beabsichtigtes Verhalten ist, Sie können keine Bildlaufleisten bei der Verwendung dieser Einheiten berücksichtigen.

+0

Sorry, ich aktualisierte meine Frage –

+0

Wieder, 'vw', nach Spezifikation, sind keine Scrollbar Existenz bekannt. Sie können sie also nicht berücksichtigen. –

+0

Gemäß den Spezifikationen nimmt VW die Scrollbar-Breite weg, wenn der Überlauf nicht automatisch aktiviert ist, dann funktioniert es wie "versteckt" für den VW-Wert. Wenn die Seite also überlaufen muss, stellen Sie sie auf "scrollen". Mit Überlauf-x & Überlauf-y wählen Sie, welche Bildlaufleiste angezeigt werden soll. – Kulvar

0

Webkit-Browser schließen die Bildlaufleisten aus, andere enthalten sie in der zurückgegebenen Breite. Das kann natürlich zu Problemen führen: zum Beispiel, wenn Sie dynamisch generierten Inhalt mit Ajax, die Höhe dinammally, Safari möglicherweise von einem Layout zum anderen während der Seite Visualisierung ... Ok, es kommt nicht oft vor, aber es ist etwas zu beachten. Auf mobilen, weniger Probleme, verursachen Scrollbars in der Regel nicht angezeigt.

Das gesagt, wenn Ihr Problem exacly Breite des Ansichtsfensters berechnen ist, ohne Scrollbalken in jedem Browser, soweit ich weiß, ist eine gute Methode, um dies:

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

hat vorher eingestellten:

body { 
    margin:0; 
    } 
25

Eine Möglichkeit, dies zu tun, ist mit calc. Soweit ich weiß, ist 100% die Breite einschließlich Bildlaufleisten. Also wenn du es tust:

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

Sie erhalten die 100vw minus die Breite der Bildlaufleiste.

Sie können dies auch mit der Höhe tun, wenn Sie einen Platz wollen, die 50% des Darstellungs zum Beispiel ist (minus 50% der scollbar Breite)

.box { 
    width: calc(50vw - ((100vw - 100%)/2)) 
    height: 0 
    padding-bottom: calc(50vw - ((100vw - 100%)/2)) 
} 
+0

Aus irgendeinem Grund, trotz vieler Antworten auf diese Art von Frage an anderer Stelle, war es diese Antwort, die am reibungslosesten für mich funktionierte - es war so perfekt und schnell, dass ich fast ein massives "Gotcha" erwarte! – Daniel

+0

Das funktionierte perfekt für mich. Vielen Dank! – Husky

+4

Das ist erstaunlich, aber funktioniert leider nur, wenn das Element, das Sie skalieren, das direkte Kind von 'body' ist, oder ein Element, das die gleiche Breite wie' body' hat (sonst '100%' verweist auf die falsche Elementbreite) . In diesem Fall können Sie einfach Prozentsätze verwenden. Es sei denn, ich verpasse etwas? – Nateowami

0

Die vw Einheit dauert nicht die overflow-y Bildlaufleiste berücksichtigt, wenn overflow-y auf auto eingestellt ist.

Ändern Sie es in overflow-y: scroll; und die vw Einheit wird das Ansichtsfenster ohne die Bildlaufleiste sein.

Einziger Nachteil zu berücksichtigen. Wenn der Inhalt in den Bildschirm passt, wird die Bildlaufleiste trotzdem angezeigt. Eine mögliche Lösung besteht darin, in JavaScript von auto zu scroll zu wechseln.