Hey,
ich habe folgendes Layout mit Flexbox erstellt:html-seminar.de/woltlab/attachment/3243/
Nun füllen die ganzen Container bei einer Höhe von 100% nur 1/4 der ganzen Website. Wenn ich dem linken Container eine Höhe von 100% zuweise, wird dieser sogar nur so groß dargestellt wie der erste Container rechts.
Wie kann das sein? & Wie kann ich die ganzen Container auf die komplette Höhe strecken?
Hier ist der Code:
HTML:
HTML
<main>
<section id="left">
<p>Left</p>
</section>
<section id="right">
<div>
<p>Right - First</p>
</div>
<div class="row">
<article>
<p>Lorem Ipsum</p>
</article>
<article>
<p>Lorem Ipsum</p>
</article>
<article>
<p>Lorem Ipsum</p>
</article>
</div>
<div>
<p>Right - Third</p>
</div>
<div>
<p>Right - Fourth</p>
</div>
</section>
</main>
Alles anzeigen
CSS:
CSS
html, body{
height: 100%;
margin: 0em;
padding: 0em;
}
main{
display: flex;
flex-direction: row;
}
main section#left{
flex-grow: 2;
background-color: darkkhaki;
align-items: stretch;
}
main section#right{
display: flex;
flex-direction: column;
flex-grow: 3;
}
#right div{
padding: 0em;
margin: 0em;
}
main section#right div:first-child{
background-color: darkorange;
height: 30%;
}
main section#right div:nth-child(3){
background-color: darkturquoise;
height: 30%;
}
main section#right div:nth-child(4){
background-color: dodgerblue;
height: 10%;
}
main section#right div:nth-child(4) p{
margin: 0em;
}
main section#right .row{
display: flex;
flex-direction: row;
background-color: darkred;
height: 30%;
}
main section#right .row article{
width: 33.33%;
border: 1px solid black;
}
Alles anzeigen