HTML/CSS: Body ist kürzer als Inhalt der Website?
Ich habe ein Sticky-Element welches im Body liegt (die "navigation"). Allerdings scrollt die nur bis zu einer bestimmten Stelle mit und das liegt daran, dass der Body nicht so hoch zu sein scheint wie die Inhalte der Website.
Im Inspector haben alle Inhalte eine Höhe und werden richtig dargestellt. Der Body hingegen geht nur bis einschließlich des 2. "Marquee". Der blau markierte contentcontainer drückt das Sticky Element dann wieder hoch.
Woran könnte das liegen? ChatGPT liefert mir keine Antwort, hab schon alles ausprobiert.
html, body {
height: 100%;
width: 100%;
scroll-behavior: smooth;
}
.marquee {
position: relative;
float: left;
width: 100vw;
max-width: 100%;
height: 125px;
overflow: hidden;
font-size: 100px;
font-weight: 600;
margin-bottom: 10vh;
}
.navigation{
position: sticky;
top: 10px;
float: left;
height: auto;
width: 92%;
margin: 0 4%;
z-index: 4
}
.contentcontainer{
width: 92%;
float: left;
position: relative;
margin: 0 4%;
overflow: auto;
}
Vielen Dank für eure Hilfe.
Computer,
Homepage,
Internet,
HTML,
Webseite,
CSS,
HTML5,
Code,
Programmiersprache,
Webdesign,
Webentwicklung,
Frontend
