nicht angemeldet
Rolf BHallo Fußnotennutzer,
aus meiner Sicht kann ich immer nur davon abraten, einen fixierten Seitenheader mit position:fixed zu verwenden. Das macht nur Kopfschmerzen, wenn auf der Seite herumgesprungen wird.
Ich setze dieses Flexbox-Grundgerüst ein, um Header und/oder Footer zu fixieren. Gescrollt wird dann nur das Innere des Main-Bereichs. Header und Footer haben ihre „natürliche“ Höhe. Wenn man ein Holy Grail Layout will (also im Main-Bereich noch einen linken und rechten Streifen, der ggf. autark scrollt), steigt man besser auf Grid um statt dafür eine weitere Flexbox einzusetzen.
<body>
<header>...</header>
<main>...</main>
<footer>...</footer>
</body>
body {
display: flex;
flex-direction: column;
height: calc(100vh - 16px);
margin: 8px;
}
header, footer {
flex: 0 0 auto;
background-color: #fcc;
}
main {
flex: 1 0 1em;
background-color: #ccf;
overflow: auto;
}
Das funktioniert im IE ab Version 10 und ältere Versionen braucht man heute nicht mehr zu beachten.
Rolf
--
sumpsi - posui - clusi
sumpsi - posui - clusi
Matthias Apsel
Gunnar Bittersmann