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
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>
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>
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
Hab’s so aus Ihrer Beschreibung interpretiert … nächstes mal evtl. ne Zeichnung beifügen ;)
Ohne code fällt es mir schwer, aber ich versuche es aus dem Bauch raus. Versuche es mit flex-grow. Aber wirklich, mach mal n codepen dann lösen wir dein Rätsel schon 😃
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/
:
Bearbeitet durch User
Also das wäre dann n 4-Zeiler in JS, window.innerHeight, dann die Höhe des DIV, bisschen rechnen und margin-top setzen voila
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.
Jetzt hab ich es mit vertikaler Zentrierung. Braucht die noch recht neuen container queries. Variante 1 | Variante 2 https://jsfiddle.net/w9v6o2ed/2/ | https://jsfiddle.net/w9v6o2ed/1/ | Zeile https://jsfiddle.net/eb9s5g6L/ | https://jsfiddle.net/w9v6o2ed/3/ | Spalte
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.
Naja, Safari ignoriere ich einfach immer komplett. Das ist heute das, was früher mal der IE war.
Ja, so eine Agentur wollte mir unlängst n neues CMS verkaufen für meinen Betrieb und da auch gut Asche dafür. Hab ich dann dankend abgelehnt genau darum :D Als Kunde ist diese Sicht für mich geschäftsschädigend wenn wiederum meine Kunden meine Site nicht nutzen können. M.E. n Nogo.
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.
Thread beobachten
Seitenaufteilung abschaltenBitte melde dich an um einen Beitrag zu schreiben. Anmeldung ist kostenlos und dauert nur eine Minute.
Bestehender Account
Schon ein Account bei Google/GoogleMail? Keine Anmeldung erforderlich!
Mit Google-Account einloggen
Mit Google-Account einloggen
Noch kein Account? Hier anmelden.