如何在移动视图中使一个容器向下推另一个容器

我希望container-2完全可见，但box2中的框在移动视图中覆盖了它。我不希望box2中的盒子大小有任何不同，我只希望container 2向下推，这样它就可以在手机中完全可见。

body {
  margin: 0;
  width: 100%;
}
.container {
  width: 100%;
  height: 100vh;
  background-color: rgb(152, 152, 152);
}
.container-2 {
  width: 100%;
  height: 100vh;
  background-color: rgb(46, 6, 6);
}
.box-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
  height: 100%;
}
.box1 {
  background-color: rgb(65, 186, 186);
  width: 50%;
  height: 100%;
}
.box2 {
  background-color: rgb(92, 191, 124);
  width: 50%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
@media (max-width: 600px) {
  .box1 {
    background-color: rgb(65, 186, 186);
    width: 100%;
    height: 50%;
  }
  .box2 {
    background-color: rgb(92, 191, 124);
    width: 100%;
    height: 50%;
  }
}

<body>
  <div class="container">
    <div class="box-container">
      <div class="box1">
      </div>
      <div class="box2" id="box">
        <div class="box1" style="background-color: blue; height: 50%;"></div>
        <div class="box1" style="background-color: green;  height: 50%;"></div>
        <div class="box1" style="background-color: yellow;  height: 50%;"></div>
        <div class="box1" style="background-color: orange; height: 50%;"></div>
      </div>
    </div>
  </div>
  <div class="container-2">
  </div>
</body>
</html>

您的问题是因为在#box中有内联CSS设置height:50%到.box1，在垂直方向上（在移动视图中）将总计为200%，因此覆盖了.container-2，所以在移动视图中将其设置为25%

body {
  margin: 0;
  width: 100%;
}
.container {
  width: 100%;
  height: 100vh;
  background-color: rgb(152, 152, 152);
}
.container-2 {
  width: 100%;
  height: 100vh;
  background-color: rgb(46, 6, 6);
}
.box-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
  height: 100%;
}
.box1 {
  background-color: rgb(65, 186, 186);
  width: 50%;
  height: 100%;
}
.box2 {
  background-color: rgb(92, 191, 124);
  width: 50%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
#box .box1 {
  height: 50%
}
#box .box1:nth-child(3n+1) {
  background: blue
}
#box .box1:nth-child(n+2):nth-child(-n+3) {
  background: red
}
@media (max-width: 600px) {
  #box .box1 {
    height: 25%
  }
  .box1 {
    background-color: rgb(65, 186, 186);
    width: 100%;
    height: 50%;
  }
  .box2 {
    background-color: rgb(92, 191, 124);
    width: 100%;
    height: 50%;
  }
}

<div class="container">
  <div class="box-container">
    <div class="box1">
    </div>
    <div class="box2" id="box">
      <div class="box1"></div>
      <div class="box1"></div>
      <div class="box1"></div>
      <div class="box1"></div>
    </div>
  </div>
</div>
<div class="container-2">
</div>

相关内容

最新更新

热门标签：