当我将屏幕调整为移动设备时，为什么我的页脚覆盖了我的所有主要内容，除了我的导航

Why is my footer covering up all my main content when I resize my screen to mobile except my nav

当我将屏幕大小调整为移动视图时，我的页脚只是覆盖了所有内容而没有滚动条，而且无论我将 window 设置多高，它仍然覆盖了所有内容。另一件奇怪的事情是它在覆盖内容时没有覆盖我的导航菜单。我试过其他帖子，但没找到有用的东西。

片段到我的网站

body {
  margin: 0px;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  height: 100%;
  width: 100%;
}

.nav {
  background-color: orangered;
  margin: 0px;
  padding: 20px;
  text-align: center;
}

.nav a {
  text-decoration: none;
  color: white;
  font-size: 140%;
  margin: 15px;
}

.nav a:hover {
  background-color: rgb(69, 69, 69, 0.3);
  padding: 10px;
  border-radius: 5px;
  transition: 0.4s;
}

* {
  box-sizing: border-box;
}

.main-con {
  border: solid;
  float: left;
  width: 60%;
  padding: 0 20px;
  height: 90%;
  background-color: crimson;
}

.sid-bar {
  border: dotted;
  background-color: burlywood;
  float: left;
  width: 40%;
  padding: 15px;
  margin-top: 0px;
  text-align: center;
  height: 90%;
}

@media only screen and (max-width: 620px) {
  /* For mobile phones: */
  .main-con,
  .sid-bar {
    width: 100%;
  }
}

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
* {
  box-sizing: border-box;
  text-decoration: none;
}

footer {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  background: #111;
}

footer .content {
  max-width: 1350px;
  margin: auto;
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

footer .content p,
a {
  color: #fff;
}

footer .content .box {
  width: 33%;
  transition: all 0.4s ease;
}

footer .content .topic {
  font-size: 22px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 16px;
}

footer .content p {
  text-align: justify;
}

footer .content .lower .topic {
  margin: 24px 0 5px 0;
}

footer .content .lower i {
  padding-right: 16px;
}

footer .content .middle {
  padding-left: 80px;
}

footer .content .middle a {
  line-height: 32px;
}

footer .content input[type="text"] {
  height: 45px;
  width: 100%;
  outline: none;
  color: #d9d9d9;
  background: #000;
  border-radius: 5px;
  padding-left: 10px;
  font-size: 17px;
  border: 2px solid #222222;
}

footer .content input[type="submit"] {
  height: 42px;
  width: 100%;
  font-size: 18px;
  color: #d9d9d9;
  background: #eb2f06;
  outline: none;
  border-radius: 5px;
  letter-spacing: 1px;
  cursor: pointer;
  margin-top: 12px;
  border: 2px solid #eb2f06;
  transition: all 0.3s ease-in-out;
}

.content input[type="submit"]:hover {
  background: none;
  color: #eb2f06;
}

footer .bottom {
  width: 100%;
  text-align: right;
  color: #d9d9d9;
  padding: 0 40px 5px 0;
}

footer .bottom a {
  color: #eb2f06;
}

footer a {
  transition: all 0.3s ease;
}

footer a:hover {
  color: #eb2f06;
}

@media (max-width:1100px) {
  footer .content .middle {
    padding-left: 50px;
  }
}

@media (max-width:950px) {
  footer .content .box {
    width: 50%;
  }
  .content {
    margin-top: 40px;
  }
}

@media (max-width:560px) {
  footer {
    position: relative;
  }
  footer .content .box {
    width: 100%;
    margin-top: 30px;
  }
  footer .content .middle {
    padding-left: 0;
  }
}

img {
  object-fit: cover;
  width: 100%;
  height: auto;
}

<!doctype html>
<html>

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="style.css">
  <link rel="icon" href="img/logo.png">
  <title>The Random Stuff Blog - A Blog That Is About - Ramdom Topics - Free For All</title>
</head>

<body>
  <nav class="nav">
    <a href="index.html" title="Home">Home</a>
    <a href="articles.html" title="Articles">Articles</a>
    <a href="about.html" title="About">About</a>
    <a href="contact.html" title="Contact">Contact</a>
  </nav>

  <div class="main-con" title="Main Content">
    <h2>Lorum Ipsum</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  </div>

  <div class="sid-bar" title="Side Bar">
    <h2>About</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
  </div>

  <footer>
    <div class="content">
      <div class="left box">
        <div class="upper">
          <div class="topic">About us</div>
          <p>The Random stuff blog is all about intresting random stuff that you might need, we post once a week and is constently being updated.</p>
        </div>
        <div class="lower">
          <div class="topic">Contact us</div>
          <div class="phone">
            <a href="#"><i class="fas fa-phone-volume"></i>###-###-####</a>
          </div>
          <div class="email">
            <a href="#"><i class="fas fa-envelope"></i>jw5929001696@gmail.com</a>
          </div>
        </div>
      </div>
      <div class="middle box">
        <div class="topic">Our Articles</div>
        <div><a href="#">Coding</a></div>
        <div><a href="#">Life</a></div>
        <div><a href="#">Crafts</a></div>
        <div><a href="#">Facts</a></div>
        <div><a href="#">Education and Laarning</a></div>
        <div><a href="#">More!</a></div>
      </div>
    </div>
    <div class="bottom">
      <p>Copyright © 2022 <a href="index.html">The Random stuff blog</a> All rights reserved</p>
    </div>
  </footer>

</body>

</html>

不要将页脚固定到位。这是我为你制作的 Codepen。

https://codepen.io/ash_000001/pen/OJOQLGV?editors=1100


body {
  margin: 0px;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  height: 100%;
  width: 100%;
}

.nav {
  background-color: orangered;
  margin: 0px;
  padding: 20px;
  text-align: center;
}

.nav a {
  text-decoration: none;
  color: white;
  font-size: 140%;
  margin: 15px;
}

.nav a:hover {
  background-color: rgb(69, 69, 69, 0.3);
  padding: 10px;
  border-radius: 5px;
  transition: 0.4s;
}

* {
  box-sizing: border-box;
}
.parent{
  
}
.main-con {
  border: solid;
  float: left;
  width: 60%;
  padding: 0 20px;
  
  background-color: crimson;
  height: 100%;
  min-height: 10px;
  max-height 100px;
}

.sid-bar {
  border: dotted;
  background-color: burlywood;
  float: left;
  width: 40%;
  padding: 15px;
  margin-top: 0px;
  text-align: center;
  height: auto;
  
  min-height: 50px;
  max-height: 520px;
}

@media only screen and (max-width: 620px) {
  /* For mobile phones: */
  .main-con,
  .sid-bar {
    width: 100%;
  }
}

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
* {
  box-sizing: border-box;
  text-decoration: none;
  
}

footer {
  width: 100%;
  height: auto;
  background: #111;
}

footer .content {
  max-width: 1350px;
  margin: auto;
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

footer .content p,
a {
  color: #fff;
}

footer .content .box {
  max-width: 33%;
  width:100%;
  transition: all 0.4s ease;
}

footer .content .topic {
  font-size: 22px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 16px;
}

footer .content p {
  text-align: justify;
}

footer .content .lower .topic {
  margin: 24px 0 5px 0;
}

footer .content .lower i {
  padding-right: 16px;
}

footer .content .middle {
  padding-left: 80px;
}

footer .content .middle a {
  line-height: 32px;
}

footer .content input[type="text"] {
  height: 45px;
  width: 100%;
  outline: none;
  color: #d9d9d9;
  background: #000;
  border-radius: 5px;
  padding-left: 10px;
  font-size: 17px;
  border: 2px solid #222222;
}

footer .content input[type="submit"] {
  height: 42px;
  width: 100%;
  font-size: 18px;
  color: #d9d9d9;
  background: #eb2f06;
  outline: none;
  border-radius: 5px;
  letter-spacing: 1px;
  cursor: pointer;
  margin-top: 12px;
  border: 2px solid #eb2f06;
  transition: all 0.3s ease-in-out;
}

.content input[type="submit"]:hover {
  background: none;
  color: #eb2f06;
}

footer .bottom {
  text-align:center;
  width: 100%;
  text-align: right;
  color: #d9d9d9;
  padding: 0 40px 5px 0;
}

footer .bottom p{
  text-align:center;
}



footer .bottom a {
  color: #eb2f06;
}

footer a {
  transition: all 0.3s ease;
}

footer a:hover {
  color: #eb2f06;
}

@media (max-width:1100px) {
  footer .content .middle {
    padding-left: 50px;
  }
  
}

@media (max-width:950px) {
  footer .content .box {
    width: 50%;
  }
  
  .content {
    margin-top: 40px;
    
  }
}

@media (min-width:560px) {
  footer {
    position:fixed;
    bottom: 0px;
    
    
  }

@media (max-width:560px) {
  
  footer .content .box {
    width: 100%;
    margin-top: 30px;
  }
  footer .content .middle {
    padding-left: 0;
  }
}

img {
  object-fit: cover;
  width: 100%;
  height: auto;
}

<!doctype html>
<html>

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="style.css">
  <link rel="icon" href="img/logo.png">
  <title>The Random Stuff Blog - A Blog That Is About - Ramdom Topics - Free For All</title>
</head>

<body>
  <nav class="nav">
    <a href="index.html" title="Home">Home</a>
    <a href="articles.html" title="Articles">Articles</a>
    <a href="about.html" title="About">About</a>
    <a href="contact.html" title="Contact">Contact</a>
  </nav>
<div class="parent">
  <div class="main-con" title="Main Content">
    <h2>Lorum Ipsum</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  </div>

  <div class="sid-bar" title="Side Bar">
    <h2>About</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
  </div>
</div>
  <footer>
    <div class="content">
      <div class="left box">
        <div class="upper">
          <div class="topic">About us</div>
          <p>The Random stuff blog is all about intresting random stuff that you might need, we post once a week and is constently being updated.</p>
        </div>
        <div class="lower">
          <div class="topic">Contact us</div>
          <div class="phone">
            <a href="#"><i class="fas fa-phone-volume"></i>###-###-####</a>
          </div>
          <div class="email">
            <a href="#"><i class="fas fa-envelope"></i>jw5929001696@gmail.com</a>
          </div>
        </div>
      </div>
      <div class="middle box">
        <div class="topic">Our Articles</div>
        <div><a href="#">Coding</a></div>
        <div><a href="#">Life</a></div>
        <div><a href="#">Crafts</a></div>
        <div><a href="#">Facts</a></div>
        <div><a href="#">Education and Laarning</a></div>
        <div><a href="#">More!</a></div>
      </div>
    </div>
    <div class="bottom">
      <p>Copyright © 2022 <a href="index.html">The Random stuff blog</a> All rights reserved</p>
    </div>
  </footer>

</body>

</html>

所以我有点经历并清理了整个事情。看来您正在努力通过使用媒体查询来解决问题。我经历并删除了所有这些。有时代码越少越好。

话虽如此，我做的主要事情是将两个 main-con 部分拆分为它们各自的 div 部分，以使其更具响应性。这样做会给你更多的样式可能性和对标记的某些部分的操作的便利性。因此，将两个部分放在各自的 div 中，删除 float 以便您可以弯曲 parent 并使宽度为 100%。之后，使两个 children width: 50%; 填满整个屏幕。最后，您可以在 parent 元素上声明高度。

一旦您调整了 main-con 的响应度，您可以使用 position: relative; 而不是 fixed 来简单地修复页脚。

编辑 ~ 您应该将您的高度和宽度添加到 html 以及 body。

html,
body {
  height: 100%;
  width: 100%;
}

body {
  margin: 0px;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

.nav {
  background-color: orangered;
  margin: 0px;
  padding: 20px;
  text-align: center;
}

.nav a {
  text-decoration: none;
  color: white;
  font-size: 140%;
  margin: 15px;
}

.nav a:hover {
  background-color: rgb(69, 69, 69, 0.3);
  padding: 10px;
  border-radius: 5px;
  transition: 0.4s;
}

* {
  box-sizing: border-box;
}

.main-con {
  border: solid;
  width: 100%;
  height: 100%;
  display: flex;
}

.main-con>div:nth-child(1) {
  width: 70%;
  padding: 0 20px;
  background-color: crimson;
}

.sid-bar {
  border: dotted;
  background-color: burlywood;
  width: 30%;
  padding: 15px;
  margin-top: 0px;
  text-align: center;
  height: 100%;
}

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
* {
  box-sizing: border-box;
  text-decoration: none;
}

footer {
  width: 100%;
  position: relative;
  bottom: 0;
  left: 0;
  background: #111;
}

footer .content {
  max-width: 1350px;
  margin: auto;
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

footer .content p,
a {
  color: #fff;
}

footer .content .box {
  width: 33%;
  transition: all 0.4s ease;
}

footer .content .topic {
  font-size: 22px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 16px;
}

footer .content p {
  text-align: justify;
}

footer .content .lower .topic {
  margin: 24px 0 5px 0;
}

footer .content .lower i {
  padding-right: 16px;
}

footer .content .middle {
  padding-left: 80px;
}

footer .content .middle a {
  line-height: 32px;
}

footer .content input[type="text"] {
  height: 45px;
  width: 100%;
  outline: none;
  color: #d9d9d9;
  background: #000;
  border-radius: 5px;
  padding-left: 10px;
  font-size: 17px;
  border: 2px solid #222222;
}

footer .content input[type="submit"] {
  height: 42px;
  width: 100%;
  font-size: 18px;
  color: #d9d9d9;
  background: #eb2f06;
  outline: none;
  border-radius: 5px;
  letter-spacing: 1px;
  cursor: pointer;
  margin-top: 12px;
  border: 2px solid #eb2f06;
  transition: all 0.3s ease-in-out;
}

.content input[type="submit"]:hover {
  background: none;
  color: #eb2f06;
}

footer .bottom {
  width: 100%;
  text-align: right;
  color: #d9d9d9;
  padding: 0 40px 5px 0;
}

footer .bottom a {
  color: #eb2f06;
}

footer a {
  transition: all 0.3s ease;
}

footer a:hover {
  color: #eb2f06;
}

img {
  object-fit: cover;
  width: 100%;
  height: auto;
}

<!doctype html>
<html>

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="style.css">
  <link rel="icon" href="img/logo.png">
  <title>The Random Stuff Blog - A Blog That Is About - Ramdom Topics - Free For All</title>
</head>

<body>
  <nav class="nav">
    <a href="index.html" title="Home">Home</a>
    <a href="articles.html" title="Articles">Articles</a>
    <a href="about.html" title="About">About</a>
    <a href="contact.html" title="Contact">Contact</a>
  </nav>

  <div class="main-con" title="Main Content">
    <div>
      <h2>Lorum Ipsum</h2>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    </div>
    <div class="sid-bar" title="Side Bar">
      <h2>About</h2>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
    </div>
  </div>



  <footer>
    <div class="content">
      <div class="left box">
        <div class="upper">
          <div class="topic">About us</div>
          <p>The Random stuff blog is all about intresting random stuff that you might need, we post once a week and is constently being updated.</p>
        </div>
        <div class="lower">
          <div class="topic">Contact us</div>
          <div class="phone">
            <a href="#"><i class="fas fa-phone-volume"></i>###-###-####</a>
          </div>
          <div class="email">
            <a href="#"><i class="fas fa-envelope"></i>jw5929001696@gmail.com</a>
          </div>
        </div>
      </div>
      <div class="middle box">
        <div class="topic">Our Articles</div>
        <div><a href="#">Coding</a></div>
        <div><a href="#">Life</a></div>
        <div><a href="#">Crafts</a></div>
        <div><a href="#">Facts</a></div>
        <div><a href="#">Education and Laarning</a></div>
        <div><a href="#">More!</a></div>
      </div>
    </div>
    <div class="bottom">
      <p>Copyright © 2022 <a href="index.html">The Random stuff blog</a> All rights reserved</p>
    </div>
  </footer>

</body>

</html>