Hallo,
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!