Ich habe mal eine Beispielseite erstellt, die deine Anforderungen erfüllen sollte.
Das nav-Element ist oben und bleibt auch beim Scrollen sichtbar.
Das footer-Element ist bei wenig Inhalt immer unten. Wenn der Inhalt nicht mehr auf eine Seite passt rutscht er nach unten und wird beim scrollen am Schluß des Inhalts sichtbar.
Die Höhe vom nav- und vom footer-Element passt sich dem jeweiligen Inhalt an, ohne das Größenangaben geändert werden müssen.
Code:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Sticky Layout</title>
<meta name="description" content="Platzhalter - Ein kurze Beschreibung des Inhalts in Satzform">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
min-height: 100vh;
margin: 0rem 0rem 0rem 0rem;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto 1fr auto;
}
body>* {
padding: 1rem;
}
nav {
background-color: darkslategray;
color: white;
position: sticky;
z-index: 1;
top: 0px;
}
main {
background-color: skyblue;
}
footer {
background-color: darkslategray;
color: white;
}
}
</style>
</head>
<body>
<nav>
<p>nav</p>
</nav>
<main>
<p>main</p>
</main>
<footer>
<p>footer</p>
</footer>
</body>
</html>