时间戳

首页 > 解决方案 > 当我调整浏览器大小时，页脚 div 与上面的 div 重叠。我做错了什么？

javascript - 当我调整浏览器大小时，页脚 div 与上面的 div 重叠。我做错了什么？

问题描述

我意识到这是需要查看的大量代码，我相信您可以忽略其中的 90%。一直在为这个问题拉头发。除了页脚和网格之外，我的其他代码都没有这个问题。（我用 .staff-box 包裹了网格）不得不取出一大块 CSS 以减少阅读时的头痛。谢谢！

.main-flex-box {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
  text-align: center;
  background-color: white;
  border-radius: 20px;
  margin-top: -40px;
  line-height: 30px;
}

.main-text-flex {
  position: relative;
  display: flex;
  flex-direction: column;
  max-width: 750px;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
}

.staff-box {
  margin-top: 40px;
  flex-direction: column;
  border-radius: 20px;
  position: relative;
  display: flex;
  min-height: 90vh;
  width: 100%;
  background-color: #f2f2f2;
  margin-left: auto;
  margin-right: auto;
}

.grid-container {
  display: grid;
  position: relative;
  position: relative;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  min-height: 400px;
  text-align: center;
  margin-top:50px;
  grid-column-gap: -40px;
  grid-row-gap: 100px;
}

.grid-item {
  height: 2px;
  background-color: black;
  display: block;
  width: 80%;
  font-weight: normal;
  position: relative;
  font-size: 1rem;
  font-size: 2vh;
  margin-left: auto;
  margin-right: auto;
}

@media all and (max-width: 1025px) {

  .main-flex-box {
    width: 100%;
    height: auto;
  }

  .home-text {
    font-size: 1.1rem;
  }

  .socials {
    display: none;
  }

  img {
    max-width: 325px;
  }
}


@media all and (max-width: 994px) {
  .grid-container {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    width: 100%;
    grid-row-gap: 175px;
  }
  .staff-box {
    height: 90vh;
    width: 100%;
  }
}

@media all and (max-width: 580px) {
  .grid-container {
  grid-template-columns: 1fr;
 }
}

@media all and (max-width: 414px) {
  .grid-container {
    margin-top: -50px;
  }
  .grid-item {
    margin-top: 90px;
  }
}

@media all and (max-width: 645px) {
  .staff-flex-box{
  margin-top: 150px;
}
}
<div class="main-text-flex">
 <h1>Massachusetts</h1>

    <p class="toggle-item">
      A New Way Photo Gallery
    </p>

      <img src="img/stock2.png" class="image-1">

 <div class="image-flex-container">
 </div>
 <div class="staff-box">
   <h1>Meet The Staff</h1>
   <h3>Here are our four most experienced members</h3>
   <div class="grid-container">
     <div class="grid-item">
       <h3>Marcus Johnson</h3>
       <p class="grid-item-text">With years of experience under his belt, he is a great addition to our team. He is the assistant manager of relations.</p>
     </div>
     <div class="grid-item">
       <h3>Bill LaPointe</h3>
       <p class="grid-item-text">With years of experience under his belt, he is a great addition to our team. He is the assistant manager of relations.</p>
     </div>
     <div class="grid-item">
       <h3>Bill Formal</h3>
       <p class="grid-item-text">With years of experience under his belt, he is a great addition to our team. He is the assistant manager of relations.</p>
     </div>
     <div class="grid-item">
       <h3>Scott Wesley</h3>
       <p class="grid-item-text">With years of experience under his belt, he is a great addition to our team. He is the assistant manager of relations.</p>
     </div>
     <div class="grid-item">
       <h3>Scott Wesley</h3>
       <p class="grid-item-text">With years of experience under his belt, he is a great addition to our team. He is the assistant manager of relations.</p>
     </div>
     <div class="grid-item">
       <h3>Scott Wesley</h3>
       <p class="grid-item-text">With years of experience under his belt, he is a great addition to our team. He is the assistant manager of relations.</p>
   </div>
 </div>
</div>
<footer class="div">
<p>footer test</p>
</footer>

标签： javascripthtmlcss

解决方案

不太确定您要完成什么，但是当我遇到此类问题时，我创建了一个仍然存在问题的最小示例。这意味着删除除了仍然显示问题的元素之外的所有内容。这就是我在这里所做的：

.staff-box {
  margin-top: 40px;
  border-radius: 20px;
  position: relative;
  min-height: 90vh;
  width: 100%;
  background-color: red
}

@media all and (max-width: 994px) {
  .staff-box {
    height: 90vh;
    width: 100%;
  }
}
<div class="staff-box">
  a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
  a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
  a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
</div>
<footer class="div">
  <p>footer test</p>
</footer>

从这里，很容易改变 css 以获得（我认为）预期的结果。如果我理解正确的话，问题在于“高度：90vh；” 在媒体查询中。它使 div 占视口的 90%，并且由于内容大于此，它会溢出 div。从媒体查询中删除该规则，页脚将出现在人员框 div 下

推荐阅读