嗨，你有没有遇到过这种事？ 咱刷新一下页面结果突然就蹦出来个滚动条？ 感觉整个世界dou崩了一样。 你懂的，这玩意儿挺让人头疼的。 别慌，咱今天就来好好聊聊这个“突然出现滚动条”的问题。 别以为这只是个小插曲，它背后可Neng隐藏着不少小秘密呢。

咱们得知道，网页上的滚动条其实是用来处理超出屏幕范围的内容的。 就像你kan书的时候，Ru果书页太厚了就需要翻页才Nengkan到全部内容一样。 网页也是类似的道理。 Ru果网页上的内容超过了屏幕的高度或者宽度，就会出现滚动条。

但是“突然出现”的滚动条那可就有点不一样了。 通常情况下网页会根据内容自动调整高度和宽度，所以不会轻易出现滚动条。 那为什么会突然出现呢？

咱说实话，有些时候你可Nengkan不到网页的实际高度。 这就是所谓的“隐性高度”。 这部分高度是由一些CSS属性决定的，比如`border`、`padding`、`box-shadow`等等。 这些属性会增加元素的整体尺寸，但不会直接影响到屏幕上的可见区域。

你Ke以想象一下一个盒子： 你给它加了个边框，然后又给它加了个内边距。 这些边框和内边距dou会让盒子kan起来比它的内容大一点。 同样的道理，这些隐性高度也会导致网页整体的高度大于屏幕的高度。

$.offsetHeight// 输出 $.scrollHeight// 输出

function setViewportHeight {  let vh = window.innerHeight * ;  document.documentElement.style.setProperty;}// 初始化setViewportHeight;// 响应窗口大小变化window.addEventListener;

import '@unocss/reset/tailwind-v4.css'

height: calc; 百分比高度：小心“没法用”

你在CSS里经常会kan到`height: 100%`这样的写法吧？ 这通常是用来让元素的高度与父元素相同。 但是！ 要小心哦！ Ru果父元素没有设置明确的高度，那么 `height: 100%` 就没啥用处了。

就像你给一个空的容器设定了容量为100%，但是这个容器本身没有任何东西装进去一样。 这样一来内部元素的实际高度就会小于你期望的100%。 导致啊…… 莫名其妙地冒出个滚动条！

`vh` 和 `vw` 是CSS中的两种特殊单位。 `vh` 代表视口高度，也就是浏览器窗口的高度； `vw` 代表视口宽度。 这两种单位非常灵活，Ke以用来控制网页元素的尺寸。

vh 的场景通常是外部容器没有限定大小的时候才比较常见。比如没有设置 height: 100% 或者只设置了 min-height: 。在这种情况下内部元素的 height 百分比就失效了。