nicht angemeldet
Flex-Column: Bildhöhe an Fenster anpassen
0 
Matthias Apsel
1 
Henry
Flex-Column: Bildhöhe an Fenster anpassen
Gunnar Bittersmann
Rolf B
MudGuardHallo,
ich habe folgendes Problem:
Ich habe eine Überschrift und darunter ein Element, beide sollen zusammen genau 100% der verfügbaren Höhe des Browsers ausfüllen (heißt: keine Scrollbar, Größe der Elemente ändert sich mit Browserhöhe).
Das funktioniert auch, solange ich kein Bild einfüge, dann wird es kritisch:
Meine Styles:
body {
margin: 0;
padding: 0;
}
#Buehne {
display: flex;
flex-direction: column;
width: 100vw;
height: 100vh;
}
section {
flex: 1 0 auto; // fülle den verfügbaren Rest von height aus!
}
img {
width: auto;
height: 100%; // fülle 100% des Elternelements (Section) aus!
}
HTML dazu:
<div id="Buehne">
<header><h1>Überschrift</h1></header>
<section><img src="./Bilder/Grafik.svg" alt="Grafik" height="900" width="600" /></section>
<!-- height & width hier für die Aspect-Ratio, wird aber von CSS überschrieben -->
</div>
RESULTAT: Funktioniert so leider nicht, Bild produziert einen "overflow" und damit eine Scrollbar.
==> Wie schaffe ich es, dass alle Elemente im BODY genau die Höhe des Browserfensters ausfüllen?
Danke für eure Hilfe!
-
Hallo Gerd Richter,
body { margin: 0; padding: 0; } #Buehne { display: flex; flex-direction: column; width: 100vw; height: 100vh; }Ich sehe ein Element namens Bühne, das so groß wie das Browserfenster sein soll. Das lässt mich vermuten, dass die Bühne ein Hintergrundbild sein soll.
Gib dem body-Element das Hintergrundbild.
Bis demnächst
Matthias--
Du kannst das Projekt SELFHTML unterstützen,
indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.-
Hallo Matthias,
Danke für deine Antwort!
...nicht <Body>, sondern die <Section> Elemente beinhalten die Bilder. 😉
...aber werde mit deinem Vorschlag weiterbasteln, man kann mit den Background-Properties ja so einiges hinbiegen.
Danke nochmal!
LG.
-
@@Matthias Apsel
Ich sehe ein Element namens Bühne, das so groß wie das Browserfenster sein soll. Das lässt mich vermuten, dass die Bühne ein Hintergrundbild sein soll.
Ich sehe ein hero image. Das lässt mich vermuten, dass es kein Hintergrundbild sein soll, sondern als
img-Element ins Markup gehört.LLAP 🖖
--
„Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“
„Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“
—Marc-Uwe Kling-
Hallo Gunnar,
schön, dass es ein img sein sollte. Eber wie erreicht man eine kontrollierbare Höhe in einerFlexbox?
Ich schaffe es nur mit einem Workaround: Nimm das Bild mit position:absolute aus dem Layout heraus. Dann setzt height:100% es auf die Höhe der Section. ansonsten erscheinen die Ergebnisse eher willkürlich (z.B. will er partout die Section auf 519 Pixel Mindeshöhe nageln, obwohl das Bild 515 hat und alle Ränder, Margins und Paddings auf 0 sind). Irgendwas passiert da, was mir unbegreiflich ist.
Rolf
--
sumpsi - posui - clusi-
Hi,
(z.B. will er partout die Section auf 519 Pixel Mindeshöhe nageln, obwohl das Bild 515 hat und alle Ränder, Margins und Paddings auf 0 sind).
Das klingt nach Unterlängen. img ist inline, sitzt also per Default auf der Basislinie der Zeile. Unterhalb der Basislinie wird Platz gelassen für die Unterlängen der Buchstaben (= das, was unter die Zeile runter-ragt bei g, j, p, q, y (und möglicherweise anderen Zeichen wie C-Cedille, t mit Komma drunter usw.))
vertical-align könnte ggf. helfen.
cu,
Andreas a/k/a MudGuard-
Hallo MudGuard,
okeh - der vertical-align hat geholfen. Alternativ geht auch display:block am img.
Problem das bleibt: der Racker berechnet die Höhe der Section basierend auf der intrinsischen Höhe des Bildes - 515 Pixel. Die Folge bei height:50% ist, dass die Section immer noch 515 Pixel hoch ist und das Bild davon die halbe Höhe einnimmt. Die #Buehne wird trotz height:100vh höher gemacht und der Body bekommt einen Scrollbar. Hinzufügen von max-height hilft nichts.
Ich hätte eigentlich gedacht, dass das obige Styling eine Größenfestlegung von außen nach innen vornimmt und damit das img in den Rahmen zwingt, statt umgekehrt.
Rolf
--
sumpsi - posui - clusi
-
-
-
-
-
Hallo Gerd,
section { flex: 1 0 auto; // fülle den verfügbaren Rest von height aus! }
hat sich bei css was geändert? Seit wann funktionieren // für Kommentare und nicht nur /**/?
Gruss
Henry--
Meine Meinung zu DSGVO & Co:
„Principiis obsta. Sero medicina parata, cum mala per longas convaluere moras.“-
Hallo Henry,
danke für den Hinweis, stimmt, war da schleißig.
...für den Fall, dass deine Frage ernst gemeint war, nein, hat sich natürlich nichts geändert - ist hier in den DOCs ja auch schön formuliert:
https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg/Syntax#Kommentare
-