Stellen Sie die Höhe einer div berechnet Breite

Question

gleich sein Dies ist mein Code (Erklärung nach): https://jsfiddle.net/L7a35dda/1/

body { 
 
    width: 1920px; 
 
    height: 1080px; 
 
    background-color: rgb(48, 48, 48); 
 
    margin: 0; 
 
    padding: 0; 
 
    
 
    display: flex; 
 
    flex-direction: column; 
 
    flex-wrap: wrap; 
 
    align-items: flex-start; 
 
    align-content: flex-start; 
 
} 
 

 
/* Overall Styles */ 
 
.group-container { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
.group-header { 
 
    height: 40px; 
 
    background-color: rgb(21, 101, 192); 
 
} 
 

 
.group-body { 
 
    flex-grow: 1; 
 

 
    display: flex; 
 
} 
 

 
.tile { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
.tile-header { 
 
    background-color: rgb(25, 118, 210); 
 
} 
 

 
.tile-body { 
 
    flex-grow: 1; 
 
} 
 

 
/* Group 1 */ 
 
#group-1 { 
 
    width: 50%; 
 
    order: 1; 
 
    border-right: 3px solid black; 
 
    border-bottom: 3px solid black; 
 
} 
 

 
#group-1 .group-body { 
 
    flex-wrap: wrap; 
 
    align-items: flex-start; 
 
    align-content: flex-start; 
 
} 
 

 
#group-1 .tile { 
 
    width: calc(100%/3); 
 
    height: 300px; /* Placeholder: Actual value needs to be equal to width */ 
 
} 
 

 
/* Group 2 */ 
 
#group-2 { 
 
    width: 50%; 
 
    order: 2; 
 
    flex-grow: 1; 
 
    border-right: 3px solid black; 
 
    border-top: 3px solid black; 
 
} 
 

 
#group-2 .group-body { 
 
    flex-direction: column; 
 
    align-items: flex-start; 
 
} 
 

 
#group-2 .tile { 
 
    flex-grow: 1; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
/* Group 3 */ 
 
#group-3 { 
 
    width: 50%; 
 
    height: 100%; 
 
    order: 3; 
 
    border-left: 3px solid black; 
 
} 
 

 
#group-3 .group-body { 
 
    flex-direction: column; 
 
} 
 

 
#group-3 .tile { 
 
    flex-grow: 1; 
 
    
 
    width: 100%; 
 
    height: 100%; 
 
}

<div id="group-1" class="group-container"> 
 
    <div class="group-header">Group 1</div> 
 
    <div class="group-body"> 
 
    <div class="tile"> 
 
     <div class="tile-header">Tile 1A</div> 
 
     <iframe class="tile-body"></iframe> 
 
    </div> 
 
    <div class="tile"> 
 
     <div class="tile-header">Tile 1B</div> 
 
     <iframe class="tile-body"></iframe> 
 
    </div> 
 
    <div class="tile"> 
 
     <div class="tile-header">Tile 1C</div> 
 
     <iframe class="tile-body"></iframe> 
 
    </div> 
 
    <div class="tile"> 
 
     <div class="tile-header">Tile 1D</div> 
 
     <iframe class="tile-body"></iframe> 
 
    </div> 
 
    <div class="tile"> 
 
     <div class="tile-header">Tile 1E</div> 
 
     <iframe class="tile-body"></iframe> 
 
    </div> 
 
    <div class="tile"> 
 
     <div class="tile-header">Tile 1F</div> 
 
     <iframe class="tile-body"></iframe> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div id="group-2" class="group-container"> 
 
    <div class="group-header">Group 2</div> 
 
    <div class="group-body"> 
 
    <div class="tile"> 
 
     <div class="tile-header">Tile 2A</div> 
 
     <iframe class="tile-body"></iframe> 
 
    </div> 
 
    <div class="tile"> 
 
     <div class="tile-header">Tile 2B</div> 
 
     <iframe class="tile-body"></iframe> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div id="group-3" class="group-container"> 
 
    <div class="group-header">Group 3</div> 
 
    <div class="group-body"> 
 
    <div class="tile"> 
 
     <div class="tile-header">Tile 3A</div> 
 
     <iframe class="tile-body"></iframe> 
 
    </div> 
 
    </div> 
 
</div>

Der obige Code zielt darauf ab, den Bildschirm in drei Gruppen von Kacheln zu unterteilen:

Gruppe 3 nimmt die gesamte rechte Seite des Bildschirms auf - ihre Breite ist konfigurierbar (derzeit auf 50% eingestellt). Ihr Inhalt kann ignoriert werden, da sie derzeit ein Platzhalter für zukünftige Entwicklungen ist.

Gruppe 1 nimmt den oberen Teil von dem auf, was von der linken Seite des Bildschirms übrig ist und enthält 6 quadratische Kacheln in einem 3x2-Layout. Die Breite jeder Kachel sollte gleich sein.

Gruppe 2 füllt den letzten verbleibenden Platz unter Gruppe 1. Er hat 2 Kacheln in einem vertikalen Layout, die sich über die gesamte verfügbare Breite und Höhe erstrecken und den vertikalen Abstand gleichmäßig zwischen ihnen verteilen.

Also scheint der Code alles zu tun, was ich brauche, außer für den Teil, wo ich die Gruppe 1 Fliesen quadratisch sein muss. Ich bin derzeit hart codieren als Platzhalter für diese Frage - das kann nicht in das eigentliche Produkt getan werden, weil es auf mehreren Computern über ein Netzwerk bereitgestellt wird, Rendern auf verschiedenen Medien mit unterschiedlichen Bildschirmauflösungen.

Wie soll ich meinen Code ändern, um dies zu erreichen?

Bearbeiten: Der Titel der Frage wurde von iframe auf div geändert, weil die Frage ursprünglich darauf ausgerichtet war, obwohl die letzte gepostete Frage stattdessen auf die Kachel div gerichtet ist.

Answer 1

Credits für die Verknüpfung von mir die Frage, welche die answer ovokuro, die mein Ziel paßt, aber da die Lösung in dieser Frage der Kommentare ist, werde ich es hier als eine richtige Antwort re-post: http://jsfiddle.net/B8FU8/6245/

.outer { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    flex-direction: row; 
 
} 
 

 
#container { 
 
    position: relative; 
 
    flex-basis: 20%; 
 
    outline: 1px solid #eee; 
 
    text-align: center; 
 
} 
 

 
#dummy { 
 
    margin-top: 100%; 
 
} 
 

 
#element { 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    background-color: silver; 
 
}

<div class="outer"> 
 
    <div id="container"> 
 
     <div id="dummy"></div> 
 
     <div id="element"> 
 
      some text 
 
     </div> 
 
    </div> 
 
    <div id="container"> 
 
     <div id="dummy"></div> 
 
     <div id="element"> 
 
      some text2 
 
     </div> 
 
    </div> 
 
    <div id="container"> 
 
     <div id="dummy"></div> 
 
     <div id="element"> 
 
      some text3 
 
     </div> 
 
    </div> 
 
    <div id="container"> 
 
     <div id="dummy"></div> 
 
     <div id="element"> 
 
      some text4 
 
     </div> 
 
    </div> 
 
    <div id="container"> 
 
     <div id="dummy"></div> 
 
     <div id="element"> 
 
      some text5 
 
     </div> 
 
    </div> 
 
    <div id="container"> 
 
     <div id="dummy"></div> 
 
     <div id="element"> 
 
      some text6 
 
     </div> 
 
    </div> 
 
    <div id="container"> 
 
     <div id="dummy"></div> 
 
     <div id="element"> 
 
      some text7 
 
     </div> 
 
    </div> 
 
    <div id="container"> 
 
     <div id="dummy"></div> 
 
     <div id="element"> 
 
      some text8 
 
     </div> 
 
    </div> 
 
    <div id="container"> 
 
     <div id="dummy"></div> 
 
     <div id="element"> 
 
      some text9 
 
     </div> 
 
    </div> 
 
</div>

nach Hantieren mit der jsfiddle Antwort, die ich gefunden, entdeckte ich, dass die display Eigenschaften in #container redundant sind zu der Lösung, also habe ich sie von meinem Code-Schnipsel entfernt.

Die einzelnen Komponenten dieser Lösung bilden, sind:

1. #container - position: relative und, natürlich, ein Breitenwert
2. #element - alle außer background-color angegebenen Eigenschaften.
3. #dummy - margin-top

Nach den Erläuterungen in der Antwort bereitgestellt oben verbunden, Punkt 3 das Seitenverhältnis: Wenn Pannen als Prozentwert angegeben werden, wird es als ein Prozentsatz des umschließenden Elements Breite berechnet . Wenn der Wert also 100% ist, wird das enthaltene Element auf ein Seitenverhältnis von 1: 1 gestreckt. Ein Wert von 75% wird es auf 4: 3 ausdehnen, und so weiter.

Nach dem Festlegen des Seitenverhältnisses arbeiten die Punkte 1 und 2 gemeinsam, um sicherzustellen, dass der tatsächliche Inhalt des Containers den gesamten Speicherplatz ausfüllt.

Credits zu JesseBuesking für die Antwort jsfiddle.