CSS div 获取剩余屏幕高度

在前端开发中，经常需要获取屏幕或者元素的高度信息，以便进行布局或计算。本文将介绍如何使用CSS div获取剩余屏幕高度。

获取剩余屏幕高度

剩余屏幕高度指的是浏览器窗口高度减去已经占用高度的部分，也就是可以用来布局的高度信息。在CSS中，可以使用vh单位来表示剩余屏幕高度，例如：

div {
  height: 100vh;
}

以上代码会将div元素的高度设置为剩余屏幕高度，也就是除去已经占用高度的部分。

获取整个屏幕高度

如果需要获取整个屏幕高度，可以使用100%单位，例如：

html, body {
  height: 100%;
}
div {
  height: 100%;
}

以上代码会将html和body元素的高度都设置为整个屏幕高度，然后将div元素的高度设置为整个屏幕高度，这样div元素的高度就等于整个屏幕高度了。

注意事项

在使用vh和%单位时，需要注意以下几点：

• vh单位可能会受到地址栏、工具栏等浏览器UI的遮挡，导致实际可用高度不准确。这种情况下，建议使用100%单位获取整个屏幕高度。
• 如果要让元素占满整个屏幕高度，需要将html和body元素的高度都设置为100%。

总结

本文介绍了如何使用CSS div获取剩余屏幕高度，包括获取剩余屏幕高度和获取整个屏幕高度两种方式。在使用时需要注意遮挡和元素占满整个屏幕高度的情况。