如何动态获取浏览器的高度？

Question

<section>
    //... 这里是文字
</section>

我在section里插入文字，文字量比较大，会撑开section（溢出的文字会用overflow：hidden隐藏起来）。
但是我不想让浏览器出现scrollbar，所以把section的高度设置成了浏览器的高度。

但是我还需要考虑浏览器全屏状态下section的高度问题，这时候浏览器的高度也会变高。
当然可以通过键盘事件去监控浏览器高度，但是不知道有没有css实现的方法，让容器高度永远等于浏览器高度？（容器里的文字会将其撑开，用height:auto或者height：100%无法达到效果）

Answer 1

css方案可以试试vh单位，取值是屏幕高度的百分比，比如height: 100vh;就相当于innerHeight，height: 50vh;就是半高。如果有兼容性问题的话，可以去github上找个对应的polyfill库挂上。

另外，我觉得你题中说的担心全屏下的DOM高度，我觉得挂在resize事件上更好吧？

Answer 2

可以参考下这篇文章js动态获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法，希望对你有帮助