css 为什么当我调整屏幕大小为移动的版时，除了导航之外，页脚会遮住我的所有主要内容

2ic8powd  于 2023-06-25  发布在  其他
关注(0)|答案(2)|浏览(164)

当我调整我的屏幕移动的查看我的页脚只是涵盖了我的所有内容没有滚动条，无论我有多高的窗口，它仍然是涵盖了所有的内容。另一件奇怪的事情是，当它覆盖内容时，它并没有覆盖我的导航菜单。我试过其他文章，但找不到有用的东西。

片段到我的网站

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>
css

2条答案

按热度按时间
piah890a

piah890a1#

所以我把整件事都整理了一遍。看起来你在努力解决你使用媒体查询的问题。我检查了一遍，把它们都拿走了。有时候更少的代码就是更好的代码。
话虽如此，我所做的使其更具响应性的主要事情是将两个main-con部分拆分为各自的div。这样做将为您提供更多的样式化可能性，并使标记的某些部分易于操作。因此，将这两个部分都放在各自的div中，删除float，这样就可以伸缩父部分并使宽度为100%。之后，将两个子元素width: 50%;设置为填满整个屏幕。最后，您可以在父元素上声明高度。
一旦调整了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>
赞(0）分享  回复(0）举报  2023-06-25
o3imoua4

o3imoua42#

不要固定页脚的位置。这是我为你做的代码。

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>
赞(0）分享  回复(0）举报  2023-06-25
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com