页脚在页面底部占用大量空白空间[重复]

Question

我正在尝试制作一个页面底部有页脚的网站。我找到了另一种关于如何将页脚在线放置在页面底部的解决方案，效果非常好，没有任何问题。

但是当我尝试使网站具有响应性时，我意识到由于某种原因页脚占用了大量空间，从而在主要内容和页脚之间产生了大量空白。我试图删除空格，但这只会导致一堆其他问题。

最好我想删除空白区域并将页脚放在页面主要内容的正下方。任何帮助或建议将不胜感激！

* {
  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>

Answer 1

最好的解决方案是从 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

编辑 ~ OP 希望容器为100vh，请改用position: fixed;。

Answer 2

您可以将此代码添加到.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>