html - 垂直调整大小时 Div 重叠

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;
}

这会将您的代码置于与其周围内容相关的 block 格式中，并清除页面两侧的所有文本/元素。如果您可以(或能够)将元素 float 到一侧，我强烈建议您这样做。如果您在元素中编写了一个 float ，这将防止您的 div 相互碰撞。它应该清除 div 元素的两边。

此外，如果您正尝试调整页面大小以适应其他设备的格式，也许这段代码可以帮到您:

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

将它放在 CSS 的开头，就在字体类型等声明的下面(在元数据部分)。这应该使您的页面始终随着窗口的大小缩放。