Scrollen

[Rolf B]

Hallo LAW-Web,

um Marcs Antwort zu ergänzen: Um das zu erreichen, musst Du folgendes tun:

• Default-Margins eliminieren (tust du)
• Default-Paddings eliminieren ODER box-sizing:border-box für alle Elemente setzen (du tust ersteres)
• height des body auf 100vh setzen (=100% Höhe der Browseranzeige)
• keinen Extrabody namens div.wrapper einfügen, das ist unnötig. Du kannst auch den Body auf die gewünschte Breite bringen

Du kannst nun zwischen zwei Wegen wählen: Flexbox oder Grid.

Mit Flexbox brauchst Du doch noch einen Wrapper - um menu und main herum. Mit diesem CSS erreichst Du dann dein gewünschtes Layout (.mainWrap soll den erwähnten Wrapper ansprechen)

body { height: 100vh; width: 1050px; margin: 0 auto;
       display:flex; flex-direction:column; }
header, footer, nav { flex: 0 0 auto; }
.mainWrap { flex: 1; display: flex;}

menu {flex: 0 0 8em}
main {flex: 1}

Die 8em für das Menü kannst Du nach Bedarf feinjustieren. Nachteil ist, dass Du die Elemente in einem responsiven Layout nicht frei anordnen kannst, weil der Wrapper um menu und main eine Struktur vorgibt.

Freier bist Du mit Grid-Layout. Mit display:grid und dem CSS grid-Attribut kannst Du das gewünschte Raster sozusagen ins CSS hineinmalen.

body { height: 100vh; width: 1050px; margin: 0 auto; display: grid; 
      grid: "hdr  hdr" auto
            "nav  nav" auto
            "menu main" 1fr
            "foot foot" auto
            / 8em 1fr;
}
header { grid-area: hdr; }
footer { grid-area: foot; }
nav { grid-area: nav; }
menu { grid-area: menu; }
main { grid-area: main; }

Sooo - und wenn Du diese feste Seitenaufteilung hast, kannst Du dem Main-Bereich noch overflow-scroll geben und bekommst dann nur darin den Scrollbar.

Und dann geh in Dich und betrachte die Seite auf einem Smartphone. Scheußlich, nicht wahr? Feste Breiten taugen überhaupt gar nichts. Du brauchst für mobile Ansichten ein anderes Grid. Hinweise, wie man das macht, findest Du auf der verlinkten Wiki-Seite zu Grids und Responsivität.

Rolf