页脚在页面底部时占用大量空白 space
Footer taking up alot of blank space when at the bottom of page
我正在尝试制作一个在页面底部有页脚的网站。我在网上找到了另一个关于如何将页脚放在页面底部的解决方案，效果非常好，没有任何问题。
但是，当我尝试使网站响应时，我意识到由于某种原因，页脚占用了很多 space，从而在主要内容和页脚之间创建了很多空白 space。我试图删除空白 space，但这只会导致其他一些问题。
我最好删除空白 space 并将页脚放在页面主要内容的正下方。如有任何帮助或建议，我们将不胜感激！
* {
box-sizing: border-box;
}
body {
font-family: Arial;
display: flex;
flex-direction: column;
height: 100vh;
margin: 0;
}
.container {
width: 100%;
border: 1px solid gray;
background-color: rgb(255, 255, 255);
border-bottom: 0px;
}
@font-face {
font-family: Gemosh;
src: url(Gemosh2.otf);
}
header {
font-family: Gemosh;
padding: 1em;
color: black;
background-image: url(header.jpg);
background-size: cover;
text-align: center;
letter-spacing: 1em;
}
header h1 {
margin-top: 5%;
font-size: 60px;
}
footer {
padding: 1em;
color: white;
background-color: black;
text-align: center;
font-size: 15px;
}
.navbar {
display: flex;
margin-bottom: 0px;
justify-content: center;
justify-content: space-evenly;
padding: 1em;
padding-bottom: 1em;
padding-top: 0em;
}
.dropdown {
display: flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: center;
position: relative;
color: white;
text-decoration: none;
padding: 1.5em;
padding-top: 0.5em;
padding-bottom: 0.5em;
background-color: #444444 !important;
border-radius: 5px;
font-size: 15px;
transition: 0.2s;
}
.dropdown a {
display: block;
color: white;
text-decoration: none;
padding: 0em;
padding-top: 0.5em;
padding-bottom: 0.5em;
border-radius: 5px;
transition: 0.2s;
text-align: center;
}
.dropdown>.dropdown-sub {
display: none;
z-index: 1;
flex-direction: column;
position: absolute;
top: 35px;
background: #636363;
color: white;
border-radius: 5px;
transition: 0.2s;
width: 100%;
right: 0px;
}
.dropdown:hover>.dropdown-sub {
display: flex;
}
.dropdown-option:hover {
background-color: #abcdef !important;
color: white;
}
.active-dropdown {
display: flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: center;
position: relative;
color: white;
text-decoration: none;
padding: 1.5em;
padding-top: 0.5em;
padding-bottom: 0.5em;
background-color: #04AA6D !important;
border-radius: 5px;
font-size: 15px;
transition: 0.2s;
}
.active-dropdown a {
display: block;
background-color: #11c784 !important;
color: white;
text-decoration: none;
padding: 0em;
padding-top: 0.5em;
padding-bottom: 0.5em;
border-radius: 5px;
transition: 0.2s;
text-align: center;
}
.active-dropdown>.dropdown-sub {
display: none;
z-index: 1;
flex-direction: column;
position: absolute;
top: 35px;
background: rgb(4, 199, 129);
color: white;
border-radius: 5px;
transition: 0.2s;
width: 100%;
right: 0px;
}
.active-dropdown:hover>.dropdown-sub {
display: flex;
}
.dropdown-option a:hover {
background-color: #abcdef !important;
color: white;
}
.main {
padding: 1em;
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
.test {
display: flex;
flex-direction: row;
justify-content: space-evenly;
font-size: 50px;
padding: 10px;
}
.londontxt {
flex: 20%;
padding: 2em;
font-size: 15px;
padding-bottom: 0em;
padding-top: 0em;
}
.pic {
flex: 20%;
padding: 10px;
}
.pic img {
margin-left: 10%;
width: 80%;
}
.pic h2 {
margin-left: 10%;
}
@media only screen and (min-width: 600px) {
.londontxt {
padding: 3em;
padding-bottom: 0em;
padding-top: 0em;
}
}
@media only screen and (min-width: 680px) {
.londontxt {
padding: 4em;
padding-bottom: 0em;
padding-top: 0em;
font-size: 20px;
}
}
@media only screen and (min-width: 821px) {
header {
display: block;
font-family: Gemosh;
padding: 1em;
color: black;
background-image: url(header.jpg);
background-size: cover;
text-align: center;
height: 350px;
letter-spacing: 1em;
}
header h1 {
margin-top: 5%;
font-size: 120px;
}
.navbar {
justify-content: center;
gap: 50px;
padding: 1em;
padding-bottom: 4em;
padding-top: 1.5em;
}
.navbar a {
padding: 2em;
padding-top: 1em;
padding-bottom: 1em;
transition: 0.2s;
}
.dropdown {
padding: 2em;
padding-top: 1em;
padding-bottom: 1em;
}
.dropdown a {
background-color: #636363 !important;
padding: 0em;
padding-top: 0.5em;
padding-bottom: 0.5em;
text-align: center;
}
.dropdown>.dropdown-sub {
top: 40px;
}
.dropdown-option a:hover {
color: white;
}
.active-dropdown {
padding: 1.8em;
padding-top: 1em;
padding-bottom: 1em;
}
.active-dropdown a {
padding: 0em;
padding-top: 0.5em;
padding-bottom: 0.5em;
}
.active-dropdown>.dropdown-sub {
top: 40px;
}
.main {
flex-direction: row;
}
.londontxt {
font-size: 15px;
padding: 1em;
}
}
@media only screen and (min-width: 1000px) {
.londontxt {
font-size: 20px;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>City</title>
<link href="london.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div class="container">
<header>
<h1>City Gallery</h1>
</header>
<div class="navbar">
<div class="active-dropdown">
<div class="dropdown-title">London</div>
<div class="dropdown-sub">
<div class="dropdown-option"><a href="">Overview</a></div>
<div class="dropdown-option"><a href="">Wikipedia</a></div>
<div class="dropdown-option"><a href="">Pictures</a></div>
</div>
</div>
<div class="dropdown">
<div class="dropdown-title">Paris</div>
<div class="dropdown-sub">
<div class="dropdown-option"><a href="">Overview</a></div>
<div class="dropdown-option"><a href="">Wikipedia</a></div>
<div class="dropdown-option"><a href="">Pictures</a></div>
</div>
</div>
<div class="dropdown">
<div class="dropdown-title">Tokyo</div>
<div class="dropdown-sub">
<div class="dropdown-option"><a href="">Overview</a></div>
<div class="dropdown-option"><a href="">Wikipedia</a></div>
<div class="dropdown-option"><a href="">Pictures</a></div>
</div>
</div>
</div>
<div class="main">
<div class="londontxt">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
<p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>
</div>
<div class="pic">
<h2>Tower Bridge:</h2>
<img src="londonbridge.jpg" alt="">
</div>
<div class="pic">
<h2>Big Ben:</h2>
<img src="londonbigben.jpg" alt="">
</div>
</div>
</div>
<footer>Copyright © 2022 Johannes</footer>
</body>
</html>
最好的解决方案是从 body 元素中删除 flex 并改为在 container. 上设置 flex 属性使用您当前的结构，您可以通过添加来解决此问题以下 CSS 到 footer.
footer {
width: 100vw;
position: fixed;
bottom: 0;
}
* {
box-sizing: border-box;
}
body {
font-family: Arial;
display: flex;
flex-direction: column;
height: 100vh;
margin: 0;
}
.container {
width: 100%;
border: 1px solid gray;
background-color: rgb(255, 255, 255);
border-bottom: 0px;
}
@font-face {
font-family: Gemosh;
src: url(Gemosh2.otf);
}
header {
font-family: Gemosh;
padding: 1em;
color: black;
background-image: url(header.jpg);
background-size: cover;
text-align: center;
letter-spacing: 1em;
}
header h1 {
margin-top: 5%;
font-size: 60px;
}
footer {
padding: 1em;
color: white;
background-color: black;
text-align: center;
font-size: 15px;
position: fixed;
width: 100vw;
bottom: 0;
}
.navbar {
display: flex;
margin-bottom: 0px;
justify-content: center;
justify-content: space-evenly;
padding: 1em;
padding-bottom: 1em;
padding-top: 0em;
}
.dropdown {
display: flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: center;
position: relative;
color: white;
text-decoration: none;
padding: 1.5em;
padding-top: 0.5em;
padding-bottom: 0.5em;
background-color: #444444 !important;
border-radius: 5px;
font-size: 15px;
transition: 0.2s;
}
.dropdown a {
display: block;
color: white;
text-decoration: none;
padding: 0em;
padding-top: 0.5em;
padding-bottom: 0.5em;
border-radius: 5px;
transition: 0.2s;
text-align: center;
}
.dropdown>.dropdown-sub {
display: none;
z-index: 1;
flex-direction: column;
position: absolute;
top: 35px;
background: #636363;
color: white;
border-radius: 5px;
transition: 0.2s;
width: 100%;
right: 0px;
}
.dropdown:hover>.dropdown-sub {
display: flex;
}
.dropdown-option:hover {
background-color: #abcdef !important;
color: white;
}
.active-dropdown {
display: flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: center;
position: relative;
color: white;
text-decoration: none;
padding: 1.5em;
padding-top: 0.5em;
padding-bottom: 0.5em;
background-color: #04AA6D !important;
border-radius: 5px;
font-size: 15px;
transition: 0.2s;
}
.active-dropdown a {
display: block;
background-color: #11c784 !important;
color: white;
text-decoration: none;
padding: 0em;
padding-top: 0.5em;
padding-bottom: 0.5em;
border-radius: 5px;
transition: 0.2s;
text-align: center;
}
.active-dropdown>.dropdown-sub {
display: none;
z-index: 1;
flex-direction: column;
position: absolute;
top: 35px;
background: rgb(4, 199, 129);
color: white;
border-radius: 5px;
transition: 0.2s;
width: 100%;
right: 0px;
}
.active-dropdown:hover>.dropdown-sub {
display: flex;
}
.dropdown-option a:hover {
background-color: #abcdef !important;
color: white;
}
.main {
padding: 1em;
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
.test {
display: flex;
flex-direction: row;
justify-content: space-evenly;
font-size: 50px;
padding: 10px;
}
.londontxt {
flex: 20%;
padding: 2em;
font-size: 15px;
padding-bottom: 0em;
padding-top: 0em;
}
.pic {
flex: 20%;
padding: 10px;
}
.pic img {
margin-left: 10%;
width: 80%;
}
.pic h2 {
margin-left: 10%;
}
@media only screen and (min-width: 600px) {
.londontxt {
padding: 3em;
padding-bottom: 0em;
padding-top: 0em;
}
}
@media only screen and (min-width: 680px) {
.londontxt {
padding: 4em;
padding-bottom: 0em;
padding-top: 0em;
font-size: 20px;
}
}
@media only screen and (min-width: 821px) {
header {
display: block;
font-family: Gemosh;
padding: 1em;
color: black;
background-image: url(header.jpg);
background-size: cover;
text-align: center;
height: 350px;
letter-spacing: 1em;
}
header h1 {
margin-top: 5%;
font-size: 120px;
}
.navbar {
justify-content: center;
gap: 50px;
padding: 1em;
padding-bottom: 4em;
padding-top: 1.5em;
}
.navbar a {
padding: 2em;
padding-top: 1em;
padding-bottom: 1em;
transition: 0.2s;
}
.dropdown {
padding: 2em;
padding-top: 1em;
padding-bottom: 1em;
}
.dropdown a {
background-color: #636363 !important;
padding: 0em;
padding-top: 0.5em;
padding-bottom: 0.5em;
text-align: center;
}
.dropdown>.dropdown-sub {
top: 40px;
}
.dropdown-option a:hover {
color: white;
}
.active-dropdown {
padding: 1.8em;
padding-top: 1em;
padding-bottom: 1em;
}
.active-dropdown a {
padding: 0em;
padding-top: 0.5em;
padding-bottom: 0.5em;
}
.active-dropdown>.dropdown-sub {
top: 40px;
}
.main {
flex-direction: row;
}
.londontxt {
font-size: 15px;
padding: 1em;
}
}
@media only screen and (min-width: 1000px) {
.londontxt {
font-size: 20px;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>City</title>
<link href="london.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div class="container">
<header>
<h1>City Gallery</h1>
</header>
<div class="navbar">
<div class="active-dropdown">
<div class="dropdown-title">London</div>
<div class="dropdown-sub">
<div class="dropdown-option"><a href="">Overview</a></div>
<div class="dropdown-option"><a href="">Wikipedia</a></div>
<div class="dropdown-option"><a href="">Pictures</a></div>
</div>
</div>
<div class="dropdown">
<div class="dropdown-title">Paris</div>
<div class="dropdown-sub">
<div class="dropdown-option"><a href="">Overview</a></div>
<div class="dropdown-option"><a href="">Wikipedia</a></div>
<div class="dropdown-option"><a href="">Pictures</a></div>
</div>
</div>
<div class="dropdown">
<div class="dropdown-title">Tokyo</div>
<div class="dropdown-sub">
<div class="dropdown-option"><a href="">Overview</a></div>
<div class="dropdown-option"><a href="">Wikipedia</a></div>
<div class="dropdown-option"><a href="">Pictures</a></div>
</div>
</div>
</div>
<div class="main">
<div class="londontxt">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
<p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>
</div>
<div class="pic">
<h2>Tower Bridge:</h2>
<img src="londonbridge.jpg" alt="">
</div>
<div class="pic">
<h2>Big Ben:</h2>
<img src="londonbigben.jpg" alt="">
</div>
</div>
</div>
<footer>Copyright © 2022 Johannes</footer>
</body>
</html
EDIT ~ OP 希望容器为 100vh，改用 position: fixed;。
您可以将此代码添加到 .pic:last-child:
.pic:last-child {
margin-bottom: -70px;
}
* {
box-sizing: border-box;
}
body {
font-family: Arial;
display: flex;
flex-direction: column;
height: 100vh;
margin: 0;
}
.container {
width: 100%;
border: 1px solid gray;
background-color: rgb(255, 255, 255);
border-bottom: 0px;
}
@font-face {
font-family: Gemosh;
src: url(Gemosh2.otf);
}
header {
font-family: Gemosh;
padding: 1em;
color: black;
background-image: url(header.jpg);
background-size: cover;
text-align: center;
letter-spacing: 1em;
}
header h1 {
margin-top: 5%;
font-size: 60px;
}
footer {
padding: 1em;
color: white;
background-color: black;
text-align: center;
font-size: 15px;
}
.navbar {
display: flex;
margin-bottom: 0px;
justify-content: center;
justify-content: space-evenly;
padding: 1em;
padding-bottom: 1em;
padding-top: 0em;
}
.dropdown {
display: flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: center;
position: relative;
color: white;
text-decoration: none;
padding: 1.5em;
padding-top: 0.5em;
padding-bottom: 0.5em;
background-color: #444444 !important;
border-radius: 5px;
font-size: 15px;
transition: 0.2s;
}
.dropdown a {
display: block;
color: white;
text-decoration: none;
padding: 0em;
padding-top: 0.5em;
padding-bottom: 0.5em;
border-radius: 5px;
transition: 0.2s;
text-align: center;
}
.dropdown>.dropdown-sub {
display: none;
z-index: 1;
flex-direction: column;
position: absolute;
top: 35px;
background: #636363;
color: white;
border-radius: 5px;
transition: 0.2s;
width: 100%;
right: 0px;
}
.dropdown:hover>.dropdown-sub {
display: flex;
}
.dropdown-option:hover {
background-color: #abcdef !important;
color: white;
}
.active-dropdown {
display: flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: center;
position: relative;
color: white;
text-decoration: none;
padding: 1.5em;
padding-top: 0.5em;
padding-bottom: 0.5em;
background-color: #04AA6D !important;
border-radius: 5px;
font-size: 15px;
transition: 0.2s;
}
.active-dropdown a {
display: block;
background-color: #11c784 !important;
color: white;
text-decoration: none;
padding: 0em;
padding-top: 0.5em;
padding-bottom: 0.5em;
border-radius: 5px;
transition: 0.2s;
text-align: center;
}
.active-dropdown>.dropdown-sub {
display: none;
z-index: 1;
flex-direction: column;
position: absolute;
top: 35px;
background: rgb(4, 199, 129);
color: white;
border-radius: 5px;
transition: 0.2s;
width: 100%;
right: 0px;
}
.active-dropdown:hover>.dropdown-sub {
display: flex;
}
.dropdown-option a:hover {
background-color: #abcdef !important;
color: white;
}
.main {
padding: 1em;
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
.test {
display: flex;
flex-direction: row;
justify-content: space-evenly;
font-size: 50px;
padding: 10px;
}
.londontxt {
flex: 20%;
padding: 2em;
font-size: 15px;
padding-bottom: 0em;
padding-top: 0em;
}
.pic {
flex: 20%;
padding: 10px;
}
.pic:last-child {
margin-bottom: -70px;
}
.pic img {
margin-left: 10%;
width: 80%;
}
.pic h2 {
margin-left: 10%;
}
@media only screen and (min-width: 600px) {
.londontxt {
padding: 3em;
padding-bottom: 0em;
padding-top: 0em;
}
}
@media only screen and (min-width: 680px) {
.londontxt {
padding: 4em;
padding-bottom: 0em;
padding-top: 0em;
font-size: 20px;
}
}
@media only screen and (min-width: 821px) {
header {
display: block;
font-family: Gemosh;
padding: 1em;
color: black;
background-image: url(header.jpg);
background-size: cover;
text-align: center;
height: 350px;
letter-spacing: 1em;
}
header h1 {
margin-top: 5%;
font-size: 120px;
}
.navbar {
justify-content: center;
gap: 50px;
padding: 1em;
padding-bottom: 4em;
padding-top: 1.5em;
}
.navbar a {
padding: 2em;
padding-top: 1em;
padding-bottom: 1em;
transition: 0.2s;
}
.dropdown {
padding: 2em;
padding-top: 1em;
padding-bottom: 1em;
}
.dropdown a {
background-color: #636363 !important;
padding: 0em;
padding-top: 0.5em;
padding-bottom: 0.5em;
text-align: center;
}
.dropdown>.dropdown-sub {
top: 40px;
}
.dropdown-option a:hover {
color: white;
}
.active-dropdown {
padding: 1.8em;
padding-top: 1em;
padding-bottom: 1em;
}
.active-dropdown a {
padding: 0em;
padding-top: 0.5em;
padding-bottom: 0.5em;
}
.active-dropdown>.dropdown-sub {
top: 40px;
}
.main {
flex-direction: row;
}
.londontxt {
font-size: 15px;
padding: 1em;
}
}
@media only screen and (min-width: 1000px) {
.londontxt {
font-size: 20px;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>City</title>
<link href="london.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div class="container">
<header>
<h1>City Gallery</h1>
</header>
<div class="navbar">
<div class="active-dropdown">
<div class="dropdown-title">London</div>
<div class="dropdown-sub">
<div class="dropdown-option"><a href="">Overview</a></div>
<div class="dropdown-option"><a href="">Wikipedia</a></div>
<div class="dropdown-option"><a href="">Pictures</a></div>
</div>
</div>
<div class="dropdown">
<div class="dropdown-title">Paris</div>
<div class="dropdown-sub">
<div class="dropdown-option"><a href="">Overview</a></div>
<div class="dropdown-option"><a href="">Wikipedia</a></div>
<div class="dropdown-option"><a href="">Pictures</a></div>
</div>
</div>
<div class="dropdown">
<div class="dropdown-title">Tokyo</div>
<div class="dropdown-sub">
<div class="dropdown-option"><a href="">Overview</a></div>
<div class="dropdown-option"><a href="">Wikipedia</a></div>
<div class="dropdown-option"><a href="">Pictures</a></div>
</div>
</div>
</div>
<div class="main">
<div class="londontxt">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
<p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>
</div>
<div class="pic">
<h2>Tower Bridge:</h2>
<img src="londonbridge.jpg" alt="">
</div>
<div class="pic">
<h2>Big Ben:</h2>
<img src="londonbigben.jpg" alt="">
</div>
</div>
</div>
<footer>Copyright © 2022 Johannes</footer>
</body>
</html>
我正在尝试制作一个在页面底部有页脚的网站。我在网上找到了另一个关于如何将页脚放在页面底部的解决方案，效果非常好，没有任何问题。
但是，当我尝试使网站响应时，我意识到由于某种原因，页脚占用了很多 space，从而在主要内容和页脚之间创建了很多空白 space。我试图删除空白 space，但这只会导致其他一些问题。
我最好删除空白 space 并将页脚放在页面主要内容的正下方。如有任何帮助或建议，我们将不胜感激！
* {
box-sizing: border-box;
}
body {
font-family: Arial;
display: flex;
flex-direction: column;
height: 100vh;
margin: 0;
}
.container {
width: 100%;
border: 1px solid gray;
background-color: rgb(255, 255, 255);
border-bottom: 0px;
}
@font-face {
font-family: Gemosh;
src: url(Gemosh2.otf);
}
header {
font-family: Gemosh;
padding: 1em;
color: black;
background-image: url(header.jpg);
background-size: cover;
text-align: center;
letter-spacing: 1em;
}
header h1 {
margin-top: 5%;
font-size: 60px;
}
footer {
padding: 1em;
color: white;
background-color: black;
text-align: center;
font-size: 15px;
}
.navbar {
display: flex;
margin-bottom: 0px;
justify-content: center;
justify-content: space-evenly;
padding: 1em;
padding-bottom: 1em;
padding-top: 0em;
}
.dropdown {
display: flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: center;
position: relative;
color: white;
text-decoration: none;
padding: 1.5em;
padding-top: 0.5em;
padding-bottom: 0.5em;
background-color: #444444 !important;
border-radius: 5px;
font-size: 15px;
transition: 0.2s;
}
.dropdown a {
display: block;
color: white;
text-decoration: none;
padding: 0em;
padding-top: 0.5em;
padding-bottom: 0.5em;
border-radius: 5px;
transition: 0.2s;
text-align: center;
}
.dropdown>.dropdown-sub {
display: none;
z-index: 1;
flex-direction: column;
position: absolute;
top: 35px;
background: #636363;
color: white;
border-radius: 5px;
transition: 0.2s;
width: 100%;
right: 0px;
}
.dropdown:hover>.dropdown-sub {
display: flex;
}
.dropdown-option:hover {
background-color: #abcdef !important;
color: white;
}
.active-dropdown {
display: flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: center;
position: relative;
color: white;
text-decoration: none;
padding: 1.5em;
padding-top: 0.5em;
padding-bottom: 0.5em;
background-color: #04AA6D !important;
border-radius: 5px;
font-size: 15px;
transition: 0.2s;
}
.active-dropdown a {
display: block;
background-color: #11c784 !important;
color: white;
text-decoration: none;
padding: 0em;
padding-top: 0.5em;
padding-bottom: 0.5em;
border-radius: 5px;
transition: 0.2s;
text-align: center;
}
.active-dropdown>.dropdown-sub {
display: none;
z-index: 1;
flex-direction: column;
position: absolute;
top: 35px;
background: rgb(4, 199, 129);
color: white;
border-radius: 5px;
transition: 0.2s;
width: 100%;
right: 0px;
}
.active-dropdown:hover>.dropdown-sub {
display: flex;
}
.dropdown-option a:hover {
background-color: #abcdef !important;
color: white;
}
.main {
padding: 1em;
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
.test {
display: flex;
flex-direction: row;
justify-content: space-evenly;
font-size: 50px;
padding: 10px;
}
.londontxt {
flex: 20%;
padding: 2em;
font-size: 15px;
padding-bottom: 0em;
padding-top: 0em;
}
.pic {
flex: 20%;
padding: 10px;
}
.pic img {
margin-left: 10%;
width: 80%;
}
.pic h2 {
margin-left: 10%;
}
@media only screen and (min-width: 600px) {
.londontxt {
padding: 3em;
padding-bottom: 0em;
padding-top: 0em;
}
}
@media only screen and (min-width: 680px) {
.londontxt {
padding: 4em;
padding-bottom: 0em;
padding-top: 0em;
font-size: 20px;
}
}
@media only screen and (min-width: 821px) {
header {
display: block;
font-family: Gemosh;
padding: 1em;
color: black;
background-image: url(header.jpg);
background-size: cover;
text-align: center;
height: 350px;
letter-spacing: 1em;
}
header h1 {
margin-top: 5%;
font-size: 120px;
}
.navbar {
justify-content: center;
gap: 50px;
padding: 1em;
padding-bottom: 4em;
padding-top: 1.5em;
}
.navbar a {
padding: 2em;
padding-top: 1em;
padding-bottom: 1em;
transition: 0.2s;
}
.dropdown {
padding: 2em;
padding-top: 1em;
padding-bottom: 1em;
}
.dropdown a {
background-color: #636363 !important;
padding: 0em;
padding-top: 0.5em;
padding-bottom: 0.5em;
text-align: center;
}
.dropdown>.dropdown-sub {
top: 40px;
}
.dropdown-option a:hover {
color: white;
}
.active-dropdown {
padding: 1.8em;
padding-top: 1em;
padding-bottom: 1em;
}
.active-dropdown a {
padding: 0em;
padding-top: 0.5em;
padding-bottom: 0.5em;
}
.active-dropdown>.dropdown-sub {
top: 40px;
}
.main {
flex-direction: row;
}
.londontxt {
font-size: 15px;
padding: 1em;
}
}
@media only screen and (min-width: 1000px) {
.londontxt {
font-size: 20px;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>City</title>
<link href="london.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div class="container">
<header>
<h1>City Gallery</h1>
</header>
<div class="navbar">
<div class="active-dropdown">
<div class="dropdown-title">London</div>
<div class="dropdown-sub">
<div class="dropdown-option"><a href="">Overview</a></div>
<div class="dropdown-option"><a href="">Wikipedia</a></div>
<div class="dropdown-option"><a href="">Pictures</a></div>
</div>
</div>
<div class="dropdown">
<div class="dropdown-title">Paris</div>
<div class="dropdown-sub">
<div class="dropdown-option"><a href="">Overview</a></div>
<div class="dropdown-option"><a href="">Wikipedia</a></div>
<div class="dropdown-option"><a href="">Pictures</a></div>
</div>
</div>
<div class="dropdown">
<div class="dropdown-title">Tokyo</div>
<div class="dropdown-sub">
<div class="dropdown-option"><a href="">Overview</a></div>
<div class="dropdown-option"><a href="">Wikipedia</a></div>
<div class="dropdown-option"><a href="">Pictures</a></div>
</div>
</div>
</div>
<div class="main">
<div class="londontxt">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
<p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>
</div>
<div class="pic">
<h2>Tower Bridge:</h2>
<img src="londonbridge.jpg" alt="">
</div>
<div class="pic">
<h2>Big Ben:</h2>
<img src="londonbigben.jpg" alt="">
</div>
</div>
</div>
<footer>Copyright © 2022 Johannes</footer>
</body>
</html>
最好的解决方案是从 body 元素中删除 flex 并改为在 container. 上设置 flex 属性使用您当前的结构，您可以通过添加来解决此问题以下 CSS 到 footer.
footer {
width: 100vw;
position: fixed;
bottom: 0;
}
* {
box-sizing: border-box;
}
body {
font-family: Arial;
display: flex;
flex-direction: column;
height: 100vh;
margin: 0;
}
.container {
width: 100%;
border: 1px solid gray;
background-color: rgb(255, 255, 255);
border-bottom: 0px;
}
@font-face {
font-family: Gemosh;
src: url(Gemosh2.otf);
}
header {
font-family: Gemosh;
padding: 1em;
color: black;
background-image: url(header.jpg);
background-size: cover;
text-align: center;
letter-spacing: 1em;
}
header h1 {
margin-top: 5%;
font-size: 60px;
}
footer {
padding: 1em;
color: white;
background-color: black;
text-align: center;
font-size: 15px;
position: fixed;
width: 100vw;
bottom: 0;
}
.navbar {
display: flex;
margin-bottom: 0px;
justify-content: center;
justify-content: space-evenly;
padding: 1em;
padding-bottom: 1em;
padding-top: 0em;
}
.dropdown {
display: flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: center;
position: relative;
color: white;
text-decoration: none;
padding: 1.5em;
padding-top: 0.5em;
padding-bottom: 0.5em;
background-color: #444444 !important;
border-radius: 5px;
font-size: 15px;
transition: 0.2s;
}
.dropdown a {
display: block;
color: white;
text-decoration: none;
padding: 0em;
padding-top: 0.5em;
padding-bottom: 0.5em;
border-radius: 5px;
transition: 0.2s;
text-align: center;
}
.dropdown>.dropdown-sub {
display: none;
z-index: 1;
flex-direction: column;
position: absolute;
top: 35px;
background: #636363;
color: white;
border-radius: 5px;
transition: 0.2s;
width: 100%;
right: 0px;
}
.dropdown:hover>.dropdown-sub {
display: flex;
}
.dropdown-option:hover {
background-color: #abcdef !important;
color: white;
}
.active-dropdown {
display: flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: center;
position: relative;
color: white;
text-decoration: none;
padding: 1.5em;
padding-top: 0.5em;
padding-bottom: 0.5em;
background-color: #04AA6D !important;
border-radius: 5px;
font-size: 15px;
transition: 0.2s;
}
.active-dropdown a {
display: block;
background-color: #11c784 !important;
color: white;
text-decoration: none;
padding: 0em;
padding-top: 0.5em;
padding-bottom: 0.5em;
border-radius: 5px;
transition: 0.2s;
text-align: center;
}
.active-dropdown>.dropdown-sub {
display: none;
z-index: 1;
flex-direction: column;
position: absolute;
top: 35px;
background: rgb(4, 199, 129);
color: white;
border-radius: 5px;
transition: 0.2s;
width: 100%;
right: 0px;
}
.active-dropdown:hover>.dropdown-sub {
display: flex;
}
.dropdown-option a:hover {
background-color: #abcdef !important;
color: white;
}
.main {
padding: 1em;
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
.test {
display: flex;
flex-direction: row;
justify-content: space-evenly;
font-size: 50px;
padding: 10px;
}
.londontxt {
flex: 20%;
padding: 2em;
font-size: 15px;
padding-bottom: 0em;
padding-top: 0em;
}
.pic {
flex: 20%;
padding: 10px;
}
.pic img {
margin-left: 10%;
width: 80%;
}
.pic h2 {
margin-left: 10%;
}
@media only screen and (min-width: 600px) {
.londontxt {
padding: 3em;
padding-bottom: 0em;
padding-top: 0em;
}
}
@media only screen and (min-width: 680px) {
.londontxt {
padding: 4em;
padding-bottom: 0em;
padding-top: 0em;
font-size: 20px;
}
}
@media only screen and (min-width: 821px) {
header {
display: block;
font-family: Gemosh;
padding: 1em;
color: black;
background-image: url(header.jpg);
background-size: cover;
text-align: center;
height: 350px;
letter-spacing: 1em;
}
header h1 {
margin-top: 5%;
font-size: 120px;
}
.navbar {
justify-content: center;
gap: 50px;
padding: 1em;
padding-bottom: 4em;
padding-top: 1.5em;
}
.navbar a {
padding: 2em;
padding-top: 1em;
padding-bottom: 1em;
transition: 0.2s;
}
.dropdown {
padding: 2em;
padding-top: 1em;
padding-bottom: 1em;
}
.dropdown a {
background-color: #636363 !important;
padding: 0em;
padding-top: 0.5em;
padding-bottom: 0.5em;
text-align: center;
}
.dropdown>.dropdown-sub {
top: 40px;
}
.dropdown-option a:hover {
color: white;
}
.active-dropdown {
padding: 1.8em;
padding-top: 1em;
padding-bottom: 1em;
}
.active-dropdown a {
padding: 0em;
padding-top: 0.5em;
padding-bottom: 0.5em;
}
.active-dropdown>.dropdown-sub {
top: 40px;
}
.main {
flex-direction: row;
}
.londontxt {
font-size: 15px;
padding: 1em;
}
}
@media only screen and (min-width: 1000px) {
.londontxt {
font-size: 20px;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>City</title>
<link href="london.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div class="container">
<header>
<h1>City Gallery</h1>
</header>
<div class="navbar">
<div class="active-dropdown">
<div class="dropdown-title">London</div>
<div class="dropdown-sub">
<div class="dropdown-option"><a href="">Overview</a></div>
<div class="dropdown-option"><a href="">Wikipedia</a></div>
<div class="dropdown-option"><a href="">Pictures</a></div>
</div>
</div>
<div class="dropdown">
<div class="dropdown-title">Paris</div>
<div class="dropdown-sub">
<div class="dropdown-option"><a href="">Overview</a></div>
<div class="dropdown-option"><a href="">Wikipedia</a></div>
<div class="dropdown-option"><a href="">Pictures</a></div>
</div>
</div>
<div class="dropdown">
<div class="dropdown-title">Tokyo</div>
<div class="dropdown-sub">
<div class="dropdown-option"><a href="">Overview</a></div>
<div class="dropdown-option"><a href="">Wikipedia</a></div>
<div class="dropdown-option"><a href="">Pictures</a></div>
</div>
</div>
</div>
<div class="main">
<div class="londontxt">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
<p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>
</div>
<div class="pic">
<h2>Tower Bridge:</h2>
<img src="londonbridge.jpg" alt="">
</div>
<div class="pic">
<h2>Big Ben:</h2>
<img src="londonbigben.jpg" alt="">
</div>
</div>
</div>
<footer>Copyright © 2022 Johannes</footer>
</body>
</html
EDIT ~ OP 希望容器为 100vh，改用 position: fixed;。
您可以将此代码添加到 .pic:last-child:
.pic:last-child {
margin-bottom: -70px;
}
* {
box-sizing: border-box;
}
body {
font-family: Arial;
display: flex;
flex-direction: column;
height: 100vh;
margin: 0;
}
.container {
width: 100%;
border: 1px solid gray;
background-color: rgb(255, 255, 255);
border-bottom: 0px;
}
@font-face {
font-family: Gemosh;
src: url(Gemosh2.otf);
}
header {
font-family: Gemosh;
padding: 1em;
color: black;
background-image: url(header.jpg);
background-size: cover;
text-align: center;
letter-spacing: 1em;
}
header h1 {
margin-top: 5%;
font-size: 60px;
}
footer {
padding: 1em;
color: white;
background-color: black;
text-align: center;
font-size: 15px;
}
.navbar {
display: flex;
margin-bottom: 0px;
justify-content: center;
justify-content: space-evenly;
padding: 1em;
padding-bottom: 1em;
padding-top: 0em;
}
.dropdown {
display: flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: center;
position: relative;
color: white;
text-decoration: none;
padding: 1.5em;
padding-top: 0.5em;
padding-bottom: 0.5em;
background-color: #444444 !important;
border-radius: 5px;
font-size: 15px;
transition: 0.2s;
}
.dropdown a {
display: block;
color: white;
text-decoration: none;
padding: 0em;
padding-top: 0.5em;
padding-bottom: 0.5em;
border-radius: 5px;
transition: 0.2s;
text-align: center;
}
.dropdown>.dropdown-sub {
display: none;
z-index: 1;
flex-direction: column;
position: absolute;
top: 35px;
background: #636363;
color: white;
border-radius: 5px;
transition: 0.2s;
width: 100%;
right: 0px;
}
.dropdown:hover>.dropdown-sub {
display: flex;
}
.dropdown-option:hover {
background-color: #abcdef !important;
color: white;
}
.active-dropdown {
display: flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: center;
position: relative;
color: white;
text-decoration: none;
padding: 1.5em;
padding-top: 0.5em;
padding-bottom: 0.5em;
background-color: #04AA6D !important;
border-radius: 5px;
font-size: 15px;
transition: 0.2s;
}
.active-dropdown a {
display: block;
background-color: #11c784 !important;
color: white;
text-decoration: none;
padding: 0em;
padding-top: 0.5em;
padding-bottom: 0.5em;
border-radius: 5px;
transition: 0.2s;
text-align: center;
}
.active-dropdown>.dropdown-sub {
display: none;
z-index: 1;
flex-direction: column;
position: absolute;
top: 35px;
background: rgb(4, 199, 129);
color: white;
border-radius: 5px;
transition: 0.2s;
width: 100%;
right: 0px;
}
.active-dropdown:hover>.dropdown-sub {
display: flex;
}
.dropdown-option a:hover {
background-color: #abcdef !important;
color: white;
}
.main {
padding: 1em;
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
.test {
display: flex;
flex-direction: row;
justify-content: space-evenly;
font-size: 50px;
padding: 10px;
}
.londontxt {
flex: 20%;
padding: 2em;
font-size: 15px;
padding-bottom: 0em;
padding-top: 0em;
}
.pic {
flex: 20%;
padding: 10px;
}
.pic:last-child {
margin-bottom: -70px;
}
.pic img {
margin-left: 10%;
width: 80%;
}
.pic h2 {
margin-left: 10%;
}
@media only screen and (min-width: 600px) {
.londontxt {
padding: 3em;
padding-bottom: 0em;
padding-top: 0em;
}
}
@media only screen and (min-width: 680px) {
.londontxt {
padding: 4em;
padding-bottom: 0em;
padding-top: 0em;
font-size: 20px;
}
}
@media only screen and (min-width: 821px) {
header {
display: block;
font-family: Gemosh;
padding: 1em;
color: black;
background-image: url(header.jpg);
background-size: cover;
text-align: center;
height: 350px;
letter-spacing: 1em;
}
header h1 {
margin-top: 5%;
font-size: 120px;
}
.navbar {
justify-content: center;
gap: 50px;
padding: 1em;
padding-bottom: 4em;
padding-top: 1.5em;
}
.navbar a {
padding: 2em;
padding-top: 1em;
padding-bottom: 1em;
transition: 0.2s;
}
.dropdown {
padding: 2em;
padding-top: 1em;
padding-bottom: 1em;
}
.dropdown a {
background-color: #636363 !important;
padding: 0em;
padding-top: 0.5em;
padding-bottom: 0.5em;
text-align: center;
}
.dropdown>.dropdown-sub {
top: 40px;
}
.dropdown-option a:hover {
color: white;
}
.active-dropdown {
padding: 1.8em;
padding-top: 1em;
padding-bottom: 1em;
}
.active-dropdown a {
padding: 0em;
padding-top: 0.5em;
padding-bottom: 0.5em;
}
.active-dropdown>.dropdown-sub {
top: 40px;
}
.main {
flex-direction: row;
}
.londontxt {
font-size: 15px;
padding: 1em;
}
}
@media only screen and (min-width: 1000px) {
.londontxt {
font-size: 20px;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>City</title>
<link href="london.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div class="container">
<header>
<h1>City Gallery</h1>
</header>
<div class="navbar">
<div class="active-dropdown">
<div class="dropdown-title">London</div>
<div class="dropdown-sub">
<div class="dropdown-option"><a href="">Overview</a></div>
<div class="dropdown-option"><a href="">Wikipedia</a></div>
<div class="dropdown-option"><a href="">Pictures</a></div>
</div>
</div>
<div class="dropdown">
<div class="dropdown-title">Paris</div>
<div class="dropdown-sub">
<div class="dropdown-option"><a href="">Overview</a></div>
<div class="dropdown-option"><a href="">Wikipedia</a></div>
<div class="dropdown-option"><a href="">Pictures</a></div>
</div>
</div>
<div class="dropdown">
<div class="dropdown-title">Tokyo</div>
<div class="dropdown-sub">
<div class="dropdown-option"><a href="">Overview</a></div>
<div class="dropdown-option"><a href="">Wikipedia</a></div>
<div class="dropdown-option"><a href="">Pictures</a></div>
</div>
</div>
</div>
<div class="main">
<div class="londontxt">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
<p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>
</div>
<div class="pic">
<h2>Tower Bridge:</h2>
<img src="londonbridge.jpg" alt="">
</div>
<div class="pic">
<h2>Big Ben:</h2>
<img src="londonbigben.jpg" alt="">
</div>
</div>
</div>
<footer>Copyright © 2022 Johannes</footer>
</body>
</html>