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.
1 Antwort
Was direkt auffällt ist, dass du all deine Elemente mit float aus dem normalen Textfluss der Seite nimmst. Das hat Einfluss auf die Höhenberechnung des Containers. Deswegen nimmt das body-Element nicht die volle Höhe der Kindelemente ein. Nimm es daher raus. Ich sehe nicht, wieso du es brauchen solltest.
Ebenso würde ich es vermeiden, den body in Höhe und Breite auf 100% zu begrenzen. Zumal Letzeres eine hässliche horizontale Scrollbar erzeugt.
Eine einfache Version könnte folgendermaßen aussehen:
<!doctype html>
<head>
<meta charset="utf-8">
<title>Example</title>
<style>
body {
background: azure;
margin: 0;
padding: 0;
scroll-behavior: smooth;
}
.marquee {
background: yellow;
font-size: 100px;
font-weight: 600;
height: 125px;
margin-bottom: 10vh;
}
.navigation {
background: white;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
margin: 0 auto 30px auto;
padding: 1rem;
position: sticky;
top: 10px;
width: 92%;
z-index: 4;
}
.content-container {
background: white;
margin: 0 auto 50px auto;
min-height: 300px;
padding: 2rem;
width: 92%;
}
</style>
</head>
<body>
<section class="marquee">marquee</section>
<nav class="navigation">navigation</nav>
<section class="content-container">contentcontainer</section>
<section class="marquee">marquee</section>
<section class="content-container">contentcontainer</section>
<section class="marquee">marquee</section>
<section class="content-container">contentcontainer</section>
<section class="marquee">marquee</section>
</body>
Vielen Dank. Das wars.
Ich war verwirrt weil der Inspector eine Containerhöhe angeben konnte.