Div im Div mit Maximalabmessungen und festem Seitenverhältnis

Chris S. OP #7520947
Lesenswert?
• ▲
▼

Hey, ich stehe vor einem Rätsel. Auf des Wesentliche Vereinfacht habe ich 3 in einer Spalte (Flexbox) angeordnete DIVs, welche genau die verfügbare Viewporthöhe und Breite einehmen sollen. DIV 1 und 3 haben irgendeinen Inhalt, das mittlere DIV soll in der verbleibenden zur Verfügung stehenden Höhe maximiert werden. Weiterhin soll das mittlere DIV ein weiteres DIV mit einem festen Seitenverhältnis von 1:1 enthalten, welches auf das Maß der kleineren zur verfügung stehenden Dimension (Breite oder Höhe des darüberliegenden DIVs) maximiert werden soll.

Versuche es jetzt selber seit geraumer Zeit, benutze google, frage ChatGPT, nichts will so richtig funktionieren.

Geht das überhaupt nur mit HTML und CSS und wenn ja wie?

Danke

Antwort Zitieren Bearbeiten Thread verschieben Thread sperren Anmeldepflicht aktivieren Anpinnen Thread löschen Thread mit anderem zusammenführen Beitrag melden
Weingut P. #7521270
Lesenswert?
• ▲
▼

Also Du hast n äußeres DIV, das die Anderen beinhaltet mit 100vh und 100vw darin 3 DIV in nebeneinander, Quasi wie Tabellenspalten jeweils Höhe 100% vom Außenrahmen und Breite 33% vom Außenrahmen.

Da ist eigentlich

div.spalte { display: inline-block; height: 100%; width: 33.3%; }

Der Außenrahmen:

div.aussen { height: 100vh; width: 100vw; }

<div class="aussen"> <div class="spalte"> blafasel </div> <div class="spalte"> blafasel </div> <div class="spalte"> blafasel </div> </div>
Antwort Zitieren Bearbeiten Löschen Beitrag melden
Weingut P. #7521275
Lesenswert?
• ▲
▼

achso, im mittleren noch n Kästchen:

<style> div.spalte { display: inline-block; height: 100%; width: 33%; margin: 0; padding: 0; } div.aussen { display: block; height: 100vh; width: 100vw; margin: 0; padding: 0; } div.innen { width: 100%; height: 33vw; background-color: #009900; } </style> </head> <body> <div class="aussen"> <div class="spalte"> blafasel </div> <div class="spalte"> <div class="innen"> blafasel </div> </div> <div class="spalte"> blafasel </div> </div> </body>
Antwort Zitieren Bearbeiten Löschen Beitrag melden
Chris S. OP #7521317
Lesenswert?
• ▲
▼

Hallo, danke für die Info. Nicht ausprobiert aber rein vom lesen hjer erfüllt das leider nicht den gewünschten Zweck.

Ich habe mich entschieden den das mittlere, zu maximierende Element umschließenden DIVs eine feste Größe zuzuweisen, so dass mich nun die einfachen mathematischen Fähigkeiten von CSS mitnutzen kann und so klappt es.

Danke Chris

Antwort Zitieren Bearbeiten Löschen Beitrag melden
Daniel A. #7521468
Lesenswert?
• ▲
▼

https://jsfiddle.net/vsmjnxad/1/

Die aspect-ratio Eigenschaft ist nur wenigen bekannt, und wird selten verwendet, ist hierfür aber ideal. Da hat chat-gpt natürlich keine Chance :)

Alternativ wären auch einige hacks mit margin möglich gewesen (prozentuale vertikal, horizontal margin gehen respektive auf breite, höhe. Ja, vertikal auf breite!), aber das erspare ich mir und euch mal.

Es hilft, immer mal wieder alle CSS Eigenschaften, Elemente, Attribute, JS APIs, etc. zu überfliegen, ob es was neues gibt, oder was das man noch nicht kennt. Kennt man die Bausteine ist das ganze ein leichtes.
Und die Hacks kennt man, wenn man schon länger dabei ist, und etwas Erfahrung gesammelt hat.

So ein Chat-Bot kann das niemals Toppen.

Ok, etwas hab ich nicht geschafft. Ich kann das Quadrat nicht vertikal zentrieren, wenn ich es versuche, ist es entweder kein Quadrat mehr, oder ist zu hoch / breit, je nach Seitenverhältnis des Containers. Das hier ging immerhin in firefox: https://jsfiddle.net/3sao5ehb/2/
Aber für Chrome habe ich dafür momentan keine Lösung für vertikale Zentrierung. Ok, man könnte etwas SVG hinein mixen https://jsfiddle.net/vsmjnxad/2/ aber dann stimmt die Grösse vom Inhalt des div nicht mehr. Man kann halt nicht alles haben.

Edit: Ich sehe gerade, spalte statt Zeile: https://jsfiddle.net/4j3mbhyp/1/

Antwort Zitieren Bearbeiten Löschen Beitrag melden
Daniel A. #7521653
Lesenswert?
• ▲
▼

Weingut P. schrieb:

window.innerHeight, dann die Höhe des DIV, bisschen rechnen und margin-top setzen voila

Dann braucht man noch einen ResizeObserver, weil die Grösse des Containers sich ja ändern könnte. Und dann merkt man, dass die Grösse des Quadrat die Grösse des Containers beeinflusst. Und wenn man all das mal behoben hat merkt man, dass es nicht flüssig läuft, wenn man die Grösse & Position anpasst.

Antwort Zitieren Bearbeiten Löschen Beitrag melden
Weingut P. #7521839
Lesenswert?
• ▲
▼

Daniel A. schrieb:

Weingut P. schrieb:

window.innerHeight, dann die Höhe des DIV, bisschen rechnen und margin-top setzen voila

Dann braucht man noch einen ResizeObserver, weil die Grösse des Containers sich ja ändern könnte. Und dann merkt man, dass die Grösse des Quadrat die Grösse des Containers beeinflusst. Und wenn man all das mal behoben hat merkt man, dass es nicht flüssig läuft, wenn man die Grösse & Position anpasst.

onload onresize im <body>

bin eher n Freund von althergebrachtem und dem kleinsten gemeinsamen Nenner von wegen Abwärtskompatibilität. Hatt erst das Thema mit webp und älteren Applegeräten in denen der Safari das nicht unterstützt -> bin wieder zurück auf jpg, sind noch viele davon im Umlauf.

Antwort Zitieren Bearbeiten Löschen Beitrag melden
Der Bundestrollaner -. (Firma: Troll Republik GmbH) #7521941
Lesenswert?
• ▲
▼

Daniel A. schrieb:

Naja, Safari ignoriere ich einfach immer komplett. Das ist heute das, was früher mal der IE war.

Man sieht halt bei so codeklopfenden Kellerkindern wie dir, die nur ein paar halbgegarte git Repos mit nichtfunktionierenden Codebrocken haben, dass man sie immer an die Kandare nehmen muss, sonst ist kein Geld zu verdienen mit euch; für Kundenkontakt völlig unbrauchbar.

Antwort Zitieren Bearbeiten Löschen Beitrag melden
Thread beobachten

Antwort schreiben

Bitte melde dich an, um einen Beitrag zu schreiben.

Bestehender Account

oder

Mit Google-Account einloggen

Noch kein Account?

Die Registrierung ist kostenlos und dauert nur eine Minute.

Jetzt registrieren