JavaScript AutoFootnoter und fester Header am Seitenkopf bearbeitet von Rolf B 30.03.2019 22:47 Hallo 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. ~~~html <body> <header>...</header> <main>...</main> <footer>...</footer> </body> ~~~ ~~~css 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
JavaScript AutoFootnoter und fester Header am Seitenkopf bearbeitet von Rolf B 30.03.2019 22:47 Hallo 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. ~~~html <body> <header>...</header> <main>...</main> <footer>...</footer> </body> ~~~ ~~~css body { display: flex; flex-direction: column; height: calc(100vh - 16px); margin: 8px; box-sizing: border-box; } 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
nicht angemeldet
