Auf Thema antworten

Beitrag

[QUOTE="Sempervivum, post: 13056, member: 3917"]
Ich habe das mal umgeändert mit einer Mediaquery und es sieht eigentlich gar nicht schlecht aus:
[CODE]        /* Bis hier her unverändert */
        
        /* @media (max-width: 767px) {
            .sidebar {
                padding: 120px 0 0;
            }
        } */

html,
        body {
            height: 100%;
        }

body {
            /* Die Elemente darin als Grid einrichten: */
            display: grid;
            /* 2 Spalten, die Breite der linken entspr. Inhalt,
            die rechte füllt den verbleibenden Raum aus: */
            grid-template-columns: auto 1fr;
            /* 2 Zeilen, die Höhe der ersten (Header) entspr. Inhalt,
            die zweite füllt den verbleibenden Raum aus: */
            grid-template-rows: auto 1fr;
        }

header.navbar {
            /* Der Header soll 2 Spalten überspannen: */
            grid-column: 1/3;
        }

main {
            overflow: auto;
        }

.main-inner {
            /* Nur um den Container zum Test zu vergrößern
            und sichtbar zu machen: */
            background-color: lightblue;
            height: 200vh;
        }

@media (max-width: 767px) {

.sidebar,
            main {
                /* Beide sollen 2 Spalten überspannen
                und die selbe Zelle einnehmen: */
                grid-column: 1/3;
                grid-row: 2/3;
            }

.sidebar {
                align-self: start;
                padding: 0;
                position: relative;
                z-index: 99;
            }
        }[/CODE]
Jetzt Mitternacht, ich mache für heute erst Mal Schluss.
[/QUOTE]

Authentifizierung