css怎么判断页面高度 |css aria

方法一：使用vh单位

vh是CSS3中新增的视口单位，1vh即表示视口高度的1%。使用vh单位可以轻松地将元素的高度设置为视口高度的固定百分比，并保证即使视口大小发生变化，元素的高度也会自适应调整。

height: 100vh; /*设置元素高度为视口高度的100%*/

方法二：使用JavaScript

有时需要精确地知道网页的实际高度，这时可以使用JavaScript来获取页面高度并将其应用到CSS中。下面是获取页面高度的代码：

var pageHeight = document.documentElement.scrollHeight;

上述代码将返回整个HTML文档的高度，包括文档的内容、内边距、边框和外边距。为了避免出现滚动条，大家常常需要将body和html元素的高度设置为视口高度，如下所示：

html,body{ /*将body和html元素的高度设置为视口高度*/
height: 100%;
}

然后将获取到的页面高度应用到所需要的元素中，如下所示：

#element{ /*将获取到的页面高度应用到元素中*/
height: pageHeight;
}

总结：使用CSS的vh单位可以轻松地设置元素的高度为视口高度的固定百分比，适用于一些简单的布局需求；而使用JavaScript获取实际页面高度可以更加精确地控制元素的高度，适用于一些复杂的布局需求。