Нижний колонтитул не отображается внизу страницы [дубликат] ⇐ CSS

[Anonymous]

Я пытаюсь создать веб-сайт для школьного проекта, но мне не удается сделать так, чтобы нижний колонтитул отображался только внизу страницы, поэтому вы можете увидеть его только при полной прокрутке вниз. Если я использую позицию: Absolute; и нижнюю часть: 0;, она отображается в моем .videooverlay.
Codepen: https://codepen .io/elijahzyx/pen/bGJXOgZ
Я попробовал все варианты расположения в .footer, но ни один из них не сработал.

Код: Выделить всё

@font-face {
font-family: 'KGRedHands';
src: url("media/KGRedHands.ttf");
}

body {
background-color: #fbf4e8;
font-family: 'KGRedHands';
}

.navbar {
overflow: hidden;
box-sizing: border-box;
background: rgba(255, 255, 255, 0.2);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(14.2px);
-webkit-backdrop-filter: blur(14.2px);
border: 1px solid rgba(255, 255, 255, 0.3);
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
z-index: 5;
height: 60px;
display: flex;
align-items: center;
}

.navbar a {
float: left;
display: block;
color: #000000;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

#logoklein {
float: left;
padding: 14px 16px;
margin: 4px;
height: 40px;
width: 40px;
}

.headervideo {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}

.videooverlay {
position: absolute;
bottom: -1px;
left: 0;
right: 0;
width: 100%;
}

.download {
position: absolute;
bottom: 15%;
left: 50%;
transform: translateX(-50%);
display: flex;
justify-content: center;
align-items: center;
width: 100%;
gap: 5px;
animation: fadein 2s;
}

@keyframes bounce {
0%,
20%,
50%,
80%,
100% {
transform: translateY(0) translateX(-50%);
}
40% {
transform: translateY(-20px) translateX(-50%);
}
60% {
transform: translateY(-15px) translateX(-50%);
}
}

.arrowdown {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
cursor: pointer;
animation: bounce 2s infinite, fadein 2s;
}

.arrowdown img {
width: 60px;
height: auto;
}

@keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

.logo {
position: absolute;
top: 10%;
left: 50%;
width: 350px;
height: auto;
transform: translateX(-50%);
z-index: 1;
animation: fadein 2s;
}

@media (max-width: 600px) {
.logo {
width: 250px;
}
}

.content {
position: absolute;
top: 105%;
left: 20%;
right: 20%;
padding-bottom: 60px;
}

.content h1 {
font-size: 40px;
text-align: left;
}

.content p {
font-size: 16px;
text-align: left;
}

@media(max-width: 600px) {
#youtubetrailer {
max-width: 70vw;
max-height: 50vh;
}
}

@media (max-width: 600px) {
.logo {
width: 250px;
}
}

.spielprinzip,
.traumfarm,
.interagieren,
.orte {
margin-top: 10%;
}

#greg {
max-width: 65vh;
float: right;
position: absolute;
right: -40;
}

@media (max-width: 1000px) {
#greg {
display: none;
}
}

.footer {
overflow: hidden;
box-sizing: border-box;
background: rgba(255, 255, 255, 0.2);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(14.2px);
-webkit-backdrop-filter: blur(14.2px);
border: 1px solid rgba(255, 255, 255, 0.3);
position: absolute;
left: 0;
bottom: 0;
width: 100%;
z-index: 5;
height: 60px;
display: flex;
align-items: center;
}

.footer .footertextlinks {
font-family: 'KGRedHands';
color: #000000;
text-align: left;
padding: 14px 16px;
float: left;
display: flex;
align-items: center;
}

.footer .footertextlinks p {
margin-right: 20px;
}

.icons {
display: flex;
margin-left: auto;
padding: 14px 16px;
align-items: center;
}

.icons img {
width: 35px;
margin-left: 10px;
}

.icons img:hover {
background: rgba(0, 0, 0, 0.2);
border-radius: 5px;
color:  rgb(0, 0, 0);
}

.footer .footertextlinks a:hover {
background: rgba(0, 0, 0, 0.2);
border-radius: 5px;
color: rgb(0, 0, 0);
}

Код: Выделить всё

Hay Day







[img]media/logoklein.png[/img]
[url=index.html]Home[/url]
[url=subpages/wiki.html]Wiki[/url]
[url=subpages/guide.html]Leitfaden für Eltern[/url]



[img]media/logo.png[/img]
[img]media/bgtop2.png[/img]

[url=https://apps.apple.com/de/app/hay-day/id506627515]
[img]media/download_apple.svg[/img]
[/url]
[url=https://play.google.com/store/apps/details?id=com.supercell.hayday]
[img]media/download_google.svg[/img]
[/url]
[url=https://www.amazon.de/Supercell-ltd-Hay-Day/dp/B018GSK5ZC]
[img]media/download_amazon.svg[/img]
[/url]

[img]media/arrowdown.png[/img]


function scrollToContent() {
var content = document.querySelector('.content');
window.scrollTo({
top: content.offsetTop,
behavior: 'smooth'
});
}




Schaue den Hay Day Trailer

https://www.youtube.com/embed/yVvkrYyb8fw?si=uSgA7BsGCQDS2ukJ

[img]media/greg.png[/img]
Entdecke die wunderbare Welt von Hay Day, dem beliebten Farmspiel, das Millionen von Spielern begeistert! Tauche ein in eine idyllische Landschaft, in der du deine eigene Farm verwalten und gestalten kannst.

Das Spielprinzip
In Hay Day beginnt der Spieler mit einer kleinen Farm, die er nach und nach ausbaut, indem er verschiedene landwirtschaftliche Produkte anbaut und erntet. Zu den angebauten Produkten gehören klassische Farmwaren wie Weizen, Mais, Karotten und Erdbeeren.
Mit fortschreitendem Spiel können Spieler auch Obstbäume wie Apfel- und Kirschbäume sowie Nutzpflanzen wie Baumwolle und Zuckerrohr anbauen.

Baue deine Traumfarm
Deiner Kreativität sind keine Grenzen gesetzt, wenn es darum geht, deine Traumfarm zu gestalten. Beginne damit, deine Felder zu bestellen und süße Tiere zu züchten, die deine Farm bevölkern werden. Von frischen Produkten wie Mais und Karotten bis
hin zu köstlichen Milchprodukten von glücklichen Kühen - die Auswahl liegt ganz bei dir.
[img]media/farm.PNGg[/img]

Interagiere mit deinen Freunden
Schließe dich mit deinen Freunden zusammen, um Handel zu treiben, an aufregenden Events teilzunehmen und euch gegenseitig auf euren Farmen zu unterstützen. Tauscht Ressourcen und Produkte aus, helft euch bei der Erfüllung von Bestellungen und besucht
einander, um eure Fortschritte zu bewundern und Tipps auszutauschen.  Mit Freunden macht das Landleben in Hay Day gleich noch mehr Spaß!
[img]media/shop.PNGg[/img]

Entdecke neue Orte
Abseits deiner Farm gibt es auch andere interessante Orte zu erkunden. Besuche den Markt, um mit anderen Spielern Handel zu treiben und seltene Gegenstände zu finden. Begib dich zur Stadt, um Bestellungen zu erfüllen und Belohnungen zu verdienen.
Oder besuche den Angelteich, um exotische Fische zu fangen und besondere Belohnungen zu erhalten.




© [url=https://supercell.com/en/]Supercell[/url] 2024
[url=https://supercell.com/en/terms-of-service/]Nutzungsbedingungen[/url]

[url=https://www.facebook.com/HayDayOfficial/?locale=de_DE]
[img]media/socialicons/facebook.png[/img]
[/url]
[url=https://www.instagram.com/hayday/?hl=de]
[img]media/socialicons/instagram.png[/img]
[/url]
[url=https://twitter.com/hayday]
[img]media/socialicons/x.png[/img]
[/url]
[url=https://www.youtube.com/@hayday]
[img]media/socialicons/youtube.png[/img]
[/url]
[url=https://www.tiktok.com/@hayday?lang=de-DE]
[img]media/socialicons/tiktok.png[/img]
[/url]

Подробнее здесь: https://stackoverflow.com/questions/784 ... om-of-page