nicht angemeldet
Rolf BHallo Hans,
hm, das ist ein sticky header der ggf. umbricht - da hilft nur JavaScript. Oder eine Restrukturierung der Seite in ein 100% Grid, d.h. den Body auf 100vh Höhe setzen (margins entfernen) und als Grid unterteilen. Bleistiftsweise so:
body {
margin: 0;
height: 100vh;
display: grid;
grid-template-columns: auto 1fr auto;
}
header {
font-size: 1.5rem;
grid-row: 1 / 2;
}
main {
grid-row: 2 / 3;
background-color: #808080b2; // Grey mit 70% Transparenz
overflow-y: scroll;
}
footer {
grid-row: 3 / 4;
border-top: medium solid #666;
padding-bottom: 1em;
}
mit diesem Markup:
<body>
<header>Dein Menübereich</header>
<main>Dein Inhalt</main>
<footer>Dein Footer</footer>
</body>
Header und Footer sind damit ständig sichtbar und nur der main-Bereich scrollt vertikal.
Außenabstände macht man mit Margin, Innenabstände mit Padding. Niemals mit <br> - das ist nur sinnvoll, wenn man gezielt Zeilenumbrüche im Fließtext braucht und mit <p> Elementen, ggf. <span> Elementen sowie der CSS Eigenschaft white-space nicht hinkommt. Also selten bis nie.
Rolf
--
sumpsi - posui - obstruxi
sumpsi - posui - obstruxi
Matthias Scharwies
Gunnar Bittersmann