我不小心将footer放在我的main标签中（但我的页面显示正确）并看到了这一点，所以我更正了它。但是当我这样做时，我的footer显示在header和main之间的某个位置......这对学校来说是一个非常重要的项目，明天就是最后期限。可以帮助我，因为我一直在寻找几个小时，似乎无法找到我做错了什么，这让我发疯！任何帮助都是如此受到赞赏！
这是网站的link
html{
box-sizing: border-box;
font-size: 62.5%;
font-family: 'Fira Sans';
}
*, *:before, *:after{
box-sizing: inherit;
}
@font-face {
font-family: 'Fira Sans';
src: url(../assets/fonts/FiraSans-Regular.otf) format('opentype');
}
@font-face {
font-family: 'Fira Sans Light';
src: url(../assets/fonts/FiraSans-Light.otf) format('opentype');
}
@font-face {
font-family: 'Fira Sans Heavy';
src: url(../assets/fonts/FiraSans-Heavy.otf) format('opentype');
}
@font-face {
font-family: 'Fira Sans Extra Bold';
src: url(../assets/fonts/FiraSans-ExtraBold.otf) format('opentype');
}
@font-face {
font-family: 'Moon';
src: url(../assets/fonts/Moon-Light.otf) format('opentype');
}
.bg-header{
background-image: url(../assets/img/paintdrop-test-01-01.svg);
height: 77.5rem;
width: 128.6rem;;
background-repeat: no-repeat;
background-position: top ;
margin: 0 auto;
}
.container-header{
width: 96rem;
margin: 0 auto;
display: flex;
flex-direction: column;
}
nav{
display: flex;
justify-content: center;
padding: 4rem 0rem;
}
nav ul{
display: flex;
justify-content: space-between;
width: 50%;
}
nav ul li{
list-style: none;
display: inline;
}
a{
text-decoration: none;
color: black;
text-transform: uppercase;
font-family: 'Fira Sans';
letter-spacing: .2rem;
font-size: 1.5rem;
display: block;
padding: 1rem 2rem;
}
.link:hover /*, a:not([class="button-wit"])*/{
color: white;
border-radius:1.5rem;
background: linear-gradient(to left, #363795, #005c97);
transition: all .2s ease-in-out;
}
.title{
display: flex;
background-image: url(../assets/img/blue-monday-title.svg);
background-repeat: no-repeat;
background-position: center center;
width: 100%;
height: 50rem;
}
h1{
font-size: 13.5rem;
text-transform: uppercase;
font-family: 'Fira Sans Heavy';
}
.hide{
display: none;
}
.intro{
font-size: 2rem;
letter-spacing: .15rem;
line-height: 1.5;
width: 45%;
margin-left: 37rem;
margin-top: -22rem;
font-family: 'Fira Sans Light';
}
.btn-class{
display: flex;
justify-content: center;
transition: all 1s ease-in-out;
}
.button-blue{
margin: 10rem 0rem 5rem 10rem;
color: white;
border-radius:1.5rem;
background: linear-gradient(to left, #363795, #005c97);
}
.button-blue:hover{
transform: scale(1.1);
}
main{
margin-top: 7rem;
}
h2{
font-family: 'Fira Sans Extra Bold';
letter-spacing: .18rem;
font-size: 6.5rem;
}
/* .bg-main-small{
background-image: url(../assets/img/splash-drop-small-01.svg);
height: 40rem;
width: 40rem;
background-position: left;
background-repeat: no-repeat;
position: absolute;
margin-left: 5rem;
} */
.bg-main-big{
background-image: url(../assets/img/splash-drop-02-01.svg);
height: 82rem;
width: 300rem;
background-position: right;
background-repeat: no-repeat;
position: absolute;
right: 0;
}
.container-main{
width: 96rem;
margin: 0 auto;
display: flex;
flex-direction: column;
}
.article-1{
display: flex;
flex-direction: column;
margin-top: 30rem;
margin-left: 5rem;
}
.article-text{
margin-top: 2rem;
font-family: "Fira Sans Light";
font-size: 2rem;
letter-spacing: .1rem;
line-height: 3.2rem;
width: 50%;
}
.bg-flow{
margin-top: 5rem;
background-image: url(../assets/img/flow_1.svg);
height: 120rem;
width: 100%;
background-position: center;
background-repeat: no-repeat;
position: absolute;
}
.article-2{
color: white;
display: flex;
flex-direction: column;
align-items: center;
margin-top: 45rem;
}
.mid{
text-align: center;
width: 70%;
}
.button-wit{
color: white;
border-radius: 1.5rem;
margin-top: 5rem;
border: .1rem solid white;
}
.button-wit:hover{
background-color: white;
color: #005c97;
}
.article-3{
display: flex;
margin-top: 45rem;
}
.blue-moonday-text{
display: flex;
flex-direction: column;
padding-left: 5rem;
}
.right{
width: 100%;
}
.footer-img{
background-image: url(../assets/img/footer-splashes-01.svg);
background-repeat: no-repeat;
height: 30rem;
width: 100%;
position: absolute;
}
.container-footer{
width: 96rem;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: space-between;
text-align: right;
position: relative;
padding-top: 25rem;
}
footer li{
height: 8rem;
list-style: none;
text-decoration: none;
}
.social-media{
padding-top: 5rem;
display: flex;
justify-content: space-between;
}
.color{
background-image: url(../assets/img/COLOR.svg);
background-repeat: no-repeat;
width: 100%;
height: 30rem;
margin-top: 10rem;
animation-name: fadeInLeft;
animation-duration: 2s;
}
@keyframes fadeInLeft {
from {
opacity: 0;
transform: translate3d(-5%, 0, 0);
}
to {
opacity: 1;
transform: none;
}
}
.button-discover{
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Blue Monday</title>
<link rel="icon" href="./assets/img/devine.png">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
<!-- <link href="https://fonts.googleapis.com/css?family=Fira+Sans" rel="stylesheet"> -->
</head>
<body>
<header>
<div class="bg-header">
<div class="container-header">
<h1 class="hide">Blue Monday</h1>
<nav>
<ul>
<li><a href="./index.html" class="link">home</a></li>
<li><a href="./pagina-2.html" class="link">activiteiten</a></li>
<li><a href="#" class="link">extra</a> </li>
</ul>
</nav>
<div class="title"></div>
<p class="intro">Het is ondertussen geen geheim meer. Maandagen zijn echt kutdagen. Maar als je er dan eentje moet uitkiezen die de ergste is, dan is het wel deze. </p>
</div>
<div class="btn-class">
<a href="#blok1" class="link button-blue">Discover more</a>
</div>
</div>
</header>
<main>
<!-- <div class="bg-main-small"></div> -->
<div class="bg-main-big" id="blok1"></div>
<div class="container-main">
<article class="article-1">
<h2>Feeling blue.</h2>
<p class="article-text">Het is amper 2 weken na het nieuwe jaar. Het jaar dat JOUW jaar ging worden... <br> Alleen zijn al je goede voornemens al mislukt, de vakantie lijkt nog mijlenver en bovendien maakt dit weer het geen haar beter. “To feel blue” betekent letterlijk
je rot of triestig voelen en dat is dan ook het gevoel dat je met nog veel andere mensen deelt.</p>
</article>
</div>
<div class="bg-flow">
<div class="container-main">
<article class="article-2">
<h2>Je bent niet alleen.</h2>
<p class="article-text mid">Je staat er niet alleen voor. Iedereen heeft last van deze dag. Elk jaar opnieuw is blue monday de meest depressieve dag ter wereld. Maar wij zullen proberen om blue monday wat meer kleur te geven!</p>
<br>
<span> <a href="#" class="button-wit">activiteiten</a> </span>
</article>
<article class="article-3">
<img src="./assets/img/moon-with-holes.svg" alt="Blue Moonday" width="500" height="500" class="blue-moon">
<div class="blue-moonday-text">
<h2>Blue Moonday.</h2>
<p class="article-text right">Voor degene die niet genoeg hebben aan deze tips: er is meer. Denk je dat de sky the limit is? Het kan verder. Veel verder. Zo ver dat je even een tripje naar de maan kan maken op deze dag waardoor je simpelweg blue monday kan overslaan! Laat
deze mensen maar afzien op deze kutdag op aarde, jij bent even gaan viben in space.</p>
</div>
</article>
</div>
</div>
</main>
<footer>
<div class="footer-img"></div>
<div class="container-footer">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Devine</a></li>
</ul>
<div class="social-media">
<a href="http://www.devine.be"><img src="./assets/img/devine.png" alt="devine" width=50 height=50></a>
<a href="http://www.facebook.com"><img src="./assets/img/facebook.png" alt="facebook" width=50 height=50></a>
<a href="http://www.twitter.com"><img src="./assets/img/twitter.png" alt="twitter" width=50 height=50></a>
</div>
</div>
</footer>
</body>
</html>
答案 0 :(得分：0)
它实际上不在你的标题和主要之间，而是在你的主要之后。问题是你的主要没有扩展，因为.bg-flow是位置：绝对因此被你的主要忽略。您还将.bg-flow设置为固定高度，这使其不会扩展。如果您下载Firefox并使用“Inspect element”，您可以看到元素的边框，这可能对您有很大帮助。
答案 1 :(得分：-2)
页面底部看起来默认不是页脚。
你可以试试这个：
footer style='position:fixed;bottom:0px;'