我的页脚显示在我的主页上方。我一直在寻找解决这个问题的日子，但似乎无法找到解决方案。我的老师也找不到它。我希望你们中的某个人能够看到问题出在哪里，并且非常感谢你花时间去看看它！这让我发疯了......
非常感谢你提前！
这是link
html {
box-sizing: border-box;
font-size: 62.5%;
font-family: 'Fira Sans';
scroll-behavior: smooth;
}
*,
*: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: 'Fira Sans Hair Italic';
src: url(../assets/fonts/FiraSans-HairItalic.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: 70rem;
width: 100%;
background-position: right;
background-repeat: no-repeat;
}
.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;
}
.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%;
}
.container-footer {
width: 96rem;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: space-between;
text-align: right;
padding-top: 25rem;
}
footer li {
height: 8rem;
list-style: none;
text-decoration: none;
}
.social-media {
padding-top: 5rem;
display: flex;
justify-content: space-between;
}<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="./pagina-3.html" 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 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>
<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>
到网站
答案 0 :(得分：1)
你的.bg-flow div有一个固定的高度。 只是摆脱它。
此外，我建议您从.container-footer中删除flex参数，因为它不是显示的元素流的一部分。 Flex项目需要连续。您已将容器main中的元素定义为flex，但这是在您的页脚中。
最后一点，我不知道你是否希望这些页脚链接具有这种垂直外观，如果没有，我认为你应该定义这个：
...\Desktop\test_qmake>qmake -config debug "APP_NAME = myappname"
Project MESSAGE: Application name: myappname
Project MESSAGE: Application name 2: myappname
Project MESSAGE: Application name: myappname
Project MESSAGE: Application name 2: myappname
Project MESSAGE: Application name: myappname
Project MESSAGE: Application name 2: myappname
...\Desktop\test_qmake>qmake -v
QMake version 3.0
Using Qt version 5.7.1 in C:/Qt/5.7/mingw53_32/lib
让我知道它是否适合你。
答案 1 :(得分：1)
这是因为您的.bg-flow的高度值为102rem，而您的内容是高度值。
我建议您使用min-height代替height，如果您想为该div提供高度
Stack Snippet
html {
box-sizing: border-box;
font-size: 62.5%;
font-family: 'Fira Sans';
scroll-behavior: smooth;
}
*,
*: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: 'Fira Sans Hair Italic';
src: url(../assets/fonts/FiraSans-HairItalic.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: 70rem;
width: 100%;
background-position: right;
background-repeat: no-repeat;
}
.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);
min-height: 120rem;
width: 100%;
background-position: center;
background-repeat: no-repeat;
}
.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%;
}
.container-footer {
width: 96rem;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: space-between;
text-align: right;
padding-top: 25rem;
}
footer li {
height: 8rem;
list-style: none;
text-decoration: none;
}
.social-media {
padding-top: 5rem;
display: flex;
justify-content: space-between;
}<!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="./pagina-3.html" 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 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>
<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>