it-swarm.com.de

Warum enthält vw die Bildlaufleiste als Teil des Ansichtsfensters?

Ich versuche, eine Website zu erstellen, die viele Kästchen mit gleicher Breite und Höhe enthält. Zum Beispiel habe ich eine Seite, die zwei gleich große Felder nebeneinander hat.

Die einfache Lösung bestand darin, die Breite und Höhe auf 50 vw einzustellen. Dies funktioniert gut, bis es eine Bildlaufleiste gibt. Ich habe stundenlang gegoogelt und kann nicht verstehen, warum vw und vh die Bildlaufleisten als Teil des Ansichtsfensters einschließen würden.

Hier ist ein Beispiel meines Problems

HTML

<div class="container">
    <div class="box red"></div>
    <div class="box green"></div>
</div>
<div class="lotta-content"></div>

CSS

body {
    margin: 0;
    padding: 0;
}

.container {
    width: 100vw;
}

.box {
    float: left;
    width: 50vw;
    height: 50vw;
}

.red {
    background-color: red;
}

.green {
    background-color: green;   
}

.lotta-content {
    height: 10000px;   
}

Beachten Sie die unerwünschte horizontale Bildlaufleiste

https://jsfiddle.net/3z887swo/

Eine mögliche Lösung wäre, Prozentsätze für die Breite zu verwenden, aber vw für die Höhe, aber es wird nie eine perfekte Schachtel sein, die nicht das Schlimmste auf der Welt ist, aber immer noch nicht ideal. Hier ist ein Beispiel

https://jsfiddle.net/3z887swo/1/

Weiß jemand, warum vw/vh Bildlaufleisten als Teil des Ansichtsfensters enthält? Wenn jemand eine bessere Lösung hat als ich, würde ich sie gerne hören. Ich suche eine reine CSS-Lösung. Ich habe lieber kein Javascript.

15
Kevin

Es wäre praktisch, wenn Ansichtsfenster-Einheiten keine Bildlaufleisten enthalten würden, aber es handelt sich schließlich um die Anzeigegröße (Bildschirm). Betrachten Sie diese Lösung jedoch mit einem Pseudoelement:

http://www.mademyday.de/css-height-equals-width-with-pure-css.html

Auch für ein Quadrat in Ihrem Beispiel:

https://jsfiddle.net/3z887swo/4/

.box {
    float: left;
    width: 50%;
}

.box::before {
    content: "";
    display: block;
    padding-top: 100%;
}

Bearbeiten - wenn sich jemand wundert, warum dies funktioniert (vertikales Padding reagiert auf die Breite des ursprünglichen Elements) ... so ist es im Grunde in der Spezifikation definiert:

Der Prozentsatz wird in Bezug auf die Breite des Blockes der generierten Box berechnet, auch für 'padding-top' und 'padding-bottom'.

http://www.w3.org/TR/CSS2/box.html#padding-properties

7
Shikkediel

Ich habe eine andere Antwort und verspüre das Bedürfnis, meine Frustration zu teilen

WEIL STANDARD-MAKERS SIND DUMM

(Ausschüsse sind im Allgemeinen immer)

Eine einfache Problemumgehung besteht darin, die Bildlaufleiste immer in der Nähe zu halten und damit umzugehen

html,body {margin:0;padding:0}
html{overflow-y:scroll}

(Verwenden Sie overflow-x für ein Layout, das vh verwendet.)

Ich glaube, dass sie ernsthaft das Hündchenan diesem geschraubt haben).

24
ZJR
html { overflow-x: hidden; }

scheint zu funktionieren

0
Yleaxeman