Question

尝试水平调整我的网页大小时，一切正常。当我尝试垂直调整页面大小时，div开始重叠，整个网页看起来很奇怪。我该如何解决？

    .container-1-wrapper
    {
      width:100vw;
      height:100vh;
      background: #3399FF;
    
    }
    .container-2-wrapper
    {
      width:100vw;
      height:100vh;
      background:   #f9f9eb;
    }

<div class="container-1-wrapper"></div>
<div class="container-2-wrapper"></div>

Answer 1

我建议将其添加到该部分的样式中

.container-1-wrapper
{
  width:100vw;
  height:100vh;
  background: #3399FF;
  position: relative;
  display: block;
  clear: both;
}

这会将您的代码置于与周围内容相关的块格式中，并清除页面两边的所有文本/元素。如果您可以（或能够）将元素浮动到一侧，则我强烈建议您这样做。如果将浮点数编码到元素中，则将使div彼此之间不会碰到。它应该清除div元素的两侧。

此外，如果您尝试调整页面大小以将其格式化为其他设备，则此代码段可能会帮助您：

<meta name="viewport" content="width=device-width, initial-scale=1">

将其放在CSS开头的字体类型等声明的下方（在元数据部分）。这样可以使您的页面变得始终随窗口大小上下缩放。

Answer 2

只有很少的信息，您只能猜测：

尝试将position: relative和display: block应用于包装器

垂直调整大小时Div重叠

2 个答案: