css 屏幕高度

CSS中的屏幕高度是指浏览器窗口的可视区域高度，不同设备的屏幕高度可能会有所不同。我们可以使用CSS来利用屏幕高度来设计网页布局和样式，以便让网页在不同屏幕大小的设备上都能有较好的显示效果。

要使用CSS设置屏幕高度，我们首先需要获取浏览器窗口的高度。可以使用JavaScript代码来获取窗口高度：

var windowHeight = window.innerHeight;

获取窗口高度后，我们可以使用CSS将元素高度设置为窗口高度的百分比，以适应不同屏幕大小的设备。例如，我们可以将一个div元素高度设置为屏幕高度的80%：

div {
  height: 80vh;
}

其中，vh是视窗高度单位，表示相对于视窗高度的百分比。上述代码表示将div元素高度设置为窗口高度的80%。

此外，我们还可以使用CSS的媒体查询来根据不同屏幕大小设定不同的样式。例如，我们可以在窗口宽度小于768px的情况下将元素高度设置为屏幕高度的50%，以适应移动设备的屏幕大小：

@media (max-width: 768px) {
  div {
    height: 50vh;
  }
}

需要注意的是，设置元素高度为窗口高度的百分比可能会影响到元素内部的子元素布局和样式。可以使用其他技术如FlexBox或Grid等来解决这些问题。