100vh 没有填满页面 - CSS

如果你在使用CSS时使用 100vh （视口高度）来设置元素的高度，并发现元素高度没有填满整个视口，那么你可能遇到了浏览器的一些处理方式。

原因

在有些情况下，浏览器可能会在100vh的高度上留出地址栏、工具栏和导航栏的高度，这样元素高度就无法填满整个视口。

解决方案

1. 使用calc()函数

calc() 函数可以用来计算元素高度，例如：

height: calc(100vh - 100px);

此时元素高度将是视口高度减去100像素。

2. 使用绝对定位

可以将元素设置为绝对定位，并且设置其宽度和高度为100%。然后将其父元素设置为相对定位，并且将其高度设置为100%。这将会覆盖包括地址栏、工具栏和导航栏在内的所有东西。例如：

.parent {
  position: relative;
  height: 100%;
}

.child {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

3. 使用 min-height 属性

设置一个最小高度，这样元素至少会填满整个视口。例如：

height: 100vh;
min-height: 100%;

结论

以上是解决100vh没有填满页面的几种方法。由于不同浏览器对视口高度的处理方式可能不同，因此这些方法可能在不同情况下表现不同。但是这些方法可以覆盖大部分情况，并提供了解决100vh问题的灵活性。