Positionierung mit Flexbox

Stef

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

Sempervivum

Zitat

Wie kann das sein? & Wie kann ich die ganzen Container auf die komplette Höhe strecken?

Du hast zwar html und body auf die volle Höhe gestreckt, aber was fehlt ist eine Anweisung, die dem main-Container sagt, dass er die volle Höhe ausfüllen soll:

Code

main {
    display: flex;
    flex-direction: row;
    height: 100%;
}

Davon abgesehen ist IMO ist der main-Container überflüssig, denn body ist für Styling nicht tabu. Außerdem wäre es konsequent, statt der Maße in Prozent die Flex-Anweisungen zu verwenden. Dann könnte das CSS so aussehen:

Code

        html,
        body {
            height: 100%;
            margin: 0em;
            padding: 0em;
        }

        body {
            display: flex;
        }

        section#left {
            flex-grow: 2;
            background-color: darkkhaki;
            align-items: stretch;
        }

        section#right {
            display: flex;
            flex-direction: column;
            flex-grow: 3;
        }

        #right div {
            padding: 0em;
            margin: 0em;

        }

        section#right div:first-child {
            background-color: darkorange;
            flex: 3;
        }

        section#right div:nth-child(3) {
            background-color: darkturquoise;
            flex: 3;

        }

        section#right div:nth-child(4) {
            background-color: dodgerblue;
            flex: 1;
        }

        section#right div:nth-child(4) p {
            margin: 0em;
        }

        section#right .row {
            display: flex;
            flex-direction: row;
            background-color: darkred;
            flex: 3;
        }

        section#right .row article {
            flex: 3;
            border: 1px solid black;
        }

Alles anzeigen

Stef

Aso okay. Ich verstehe.

Vielen Dank dir

Jetzt mitmachen!