Wie kann ich Felder mit gleicher Breite/Höhe erstellen, die zur Bildschirmbreite passen? [duplicate]

Ich versuche, eine Website zu erstellen, die viele Felder mit gleicher Breite und Höhe enthält. Ich habe zum Beispiel eine Seite mit zwei gleich großen Feldern nebeneinander.

Die einfache Lösung bestand darin, die Breite und Höhe auf 50 vw einzustellen. Das funktioniert großartig, bis es eine Bildlaufleiste gibt. Ich habe stundenlang gegoogelt und kann nicht verstehen, warum um alles in der Welt vw und vh die Bildlaufleisten als Teil des Ansichtsfensters einbeziehen.

Hier ist ein Beispiel meines Problems

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;
}

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

Beachten Sie die unerwünschte horizontale Bildlaufleiste.

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

body {
    margin: 0;
    padding: 0;
}

.container {
    width: 100%;
}

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

.red {
    background-color: red;
}

.green {
    background-color: green;   
}

.lotta-content {
    height: 10000px;   
}
}

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

Warum enthält vw/vh Bildlaufleisten als Teil des Ansichtsfensters? Gibt es eine bessere Lösung als meine eigene? Ich suche eine reine CSS-Lösung. Ich habe lieber kein JavaScript.

Eine einfache (vereinfachte) Problemumgehung besteht darin, die Bildlaufleiste immer verfügbar zu lassen und damit umzugehen

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

(verwenden overflow-x für ein Layout, das verwendet vh)

Es wäre praktisch, wenn die Ansichtsfenstereinheiten dies nicht tun würden enthalten verursachen Bildlaufleisten, aber es ist schließlich die Anzeigegröße (Bildschirm). Schauen Sie sich diese Lösung jedoch mit einem Pseudoelement an:

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

Ergibt auch in Ihrem Beispiel ein Quadrat:

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

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

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

Bearbeiten – falls sich jemand fragt, warum das funktioniert (vertikale Auffüllung entsprechend der Breite des ursprünglichen Elements) … im Grunde ist es in der Spezifikation so definiert:

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

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

Nachdem ich auf meine eigene Antwort gestoßen bin, denke ich, dass sie etwas verfeinert werden muss. Semantische Mehrdeutigkeit ist der Grund, warum ich das Wort „einschließen“ oben durch „Ursache“ ersetzt habe. Weil es eher die Tatsache ist vw Einheiten berücksichtigen nur die Größe des Ansichtsfensters – nicht einschließlich aller Bildlaufleisten und verursachend Überlauf und eine Bildlaufleiste in die andere Richtung, wenn die Breite hinzugefügt wird 100vw (Der insgesamt benötigte Platz entspricht dem Ansichtsfenster plus der Bildlaufleistenbreite und überschreitet den Bildschirm.)

Wie bei der Frage hier: Wie geht man damit am besten um? vw Units werden sie wahrscheinlich nach Möglichkeit meiden, da sie einfach nicht sehr kompatibel mit Desktop-Browsern sind (die keine überlagernden Bildlaufleisten haben).

Ich habe die Idee herausgeschnitten, die eine CSS-Variable enthielt, so hoffnungsvoll sie auch schien.

Diese Frage ist alt und wurde oben bereits beantwortet. Daher werde ich mich darauf konzentrieren, die Breite der Bildlaufleiste zu ermitteln, um sie dann zur Berechnung der Elementbreiten zu verwenden. Aus diesem Grund bin ich hier gelandet. Hoffentlich hilft das anderen Google-Mitarbeitern.

Eine schlampige CSS-Lösung

Ich habe mit dem Schreiben der reinen CSS-Lösung basierend auf der folgenden Berechnung begonnen, aber sobald Sie anfangen, Elemente in Containern mit variabler Breite zu berücksichtigen, insbesondere wenn sie nicht 100 % der sichtbaren Breite haben, wird die calc Funktionen werden kompliziert und unleserlich.

Für alle Interessierten hier calc auf dem Wurzelelement (<html>) (vorausgesetzt, das Dokument hat die volle Breite und ist nicht breiter) gibt Ihnen die Breite der Bildlaufleiste oder 0, wenn keine Bildlaufleiste angezeigt wird.

calc( 100vw - 100% );

Eine robuste Lösung

Persönlich würde ich in diesem Fall nicht gegen CSS ankämpfen. Verwenden Sie das richtige Werkzeug für den Job:

(function get_scrollbar_width() {

    // Get window width including scrollbar.
    const withScrollBar = window.innerWidth;
    
    // Get window width excluding scrollbar.
    const noScrollBar = document.querySelector("html").getBoundingClientRect().width;
    
    // Calc the scrollbar width.
    scrollbarWidth = parseInt((withScrollBar - noScrollBar), 10) + 'px';

    // Update the CSS custom property value.
    let root = document.documentElement;
    root.style.setProperty('--scrollbar', scrollbarWidth);
    
})();

:root {
    --scrollbar: 0px;
}

body {
    overflow: scroll;
}

.demobox {
    display: grid;
    grid: auto / var(--scrollbar) max-content;
    width: calc(10em + var(--scrollbar) );
    margin: 0 auto;
}

.demobox > div {
    background: red;
}

.demobox > p {
    padding: 1em;
    text-align: center;
    width: 10em;
}

<div class="demobox">
    <div></div>
    <p>
        This red grid cell represents the scrollbar width as set
        on the CSS custom property by the JavaScript function.
    </p>
</div>

html { overflow-x: hidden; }

scheint zu funktionieren

Ich habe hier eine Lösung. Wenn Sie 100vw verwenden, wird die Breite der Bildlaufleiste berücksichtigt, oder? Wenn wir es also nicht richtig machen können, können wir die Bildlaufleiste entfernen und sie unsichtbar machen. so: Bildlaufleiste ausblenden, aber weiterhin scrollen können