如何避免使用 100vh 时 div 重叠

在前端开发中，时常会碰到需要让一个元素高度撑满当前视口的需求。开发者可能会使用 100vh 来达到这个效果。但是，在某些情况下，这种方法会导致元素重叠、出现滚动条或者空白区域的问题。本文将介绍为什么这种情况会发生，以及如何避免。

为什么会出现 100vh 重叠问题？

我们知道，vh 单位是相对于视口高度的百分比单位，而视口高度并不包括浏览器工具栏和其他 UI 元素。因此，如果我们的元素设置为 100vh，那么这个元素的实际高度可能大于视口高度。这就导致了元素间的重叠。

此外，如果网页内容高度超出视口高度，还会导致出现滚动条或者空白区域的问题。

如何避免 100vh 重叠问题？

方案一：使用 calc() 函数

我们可以使用 calc() 函数来避免出现 100vh 重叠问题。例如，我们可以将元素高度设置为 calc(100vh - 50px)，其中 50px 表示浏览器工具栏和其他 UI 元素的高度。

.element {
  height: calc(100vh - 50px);
}

这种方法通常能够解决问题，但是需要手动计算浏览器工具栏和其他 UI 元素的高度。

方案二：使用 position 属性

我们也可以使用 position 属性来避免出现 100vh 重叠问题。例如，我们可以将元素的 position 属性设置为 absolute，然后通过 top、right、bottom、left 属性来定位元素。

.element {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

这种方法会将元素的高度撑满视口，并避免出现重叠问题。但是，如果我们希望元素的内容能够滚动，就需要给元素添加 overflow: auto 属性。

方案三：使用 Flexbox

我们也可以使用 Flexbox 布局来避免出现 100vh 重叠问题。例如，我们可以将父元素的 height 属性设置为 100vh，并使用 flex-direction: column，justify-content: center，align-items: center 等属性来垂直居中元素。

.parent {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.element {
  /* 元素样式 */
}

这种方法同样可以将元素的高度撑满视口，并避免出现重叠问题。但是，需要注意的是，如果元素的内容超出了视口高度，还是会出现滚动条。

总结

在开发中，我们需要注意避免使用 100vh 来撑满元素的高度。我们可以使用 calc() 函数、position 属性或者 Flexbox 布局来解决问题。每种方法都有其优缺点，我们需要根据实际情况进行选择。