别用那破height: 100%了！让你网页铺满没滚动条的坑我爬了三天...

妈的，昨晚又熬到三点，就为了甲方爸爸那句“我要那种大气、一打开就铺满整个屏幕、一点缝隙都没有的感觉”鬼知道我被这个“铺满”折磨了多久，最开始傻了吧唧用 height: 100%，结果在 body 和 html 上折腾来折腾去，不是这里多个滚动条就是那里差一截，尤其手机上那个该死的地址栏和工具栏一滑动就出来进去，页面跟着乱跳，用户体验？我当时就想把用户（和甲方）体验了。

后来才知道，% 这玩意是相对于父级高度的，html 和 body 的初始高度可不是整个视窗那么单纯，而且移动端那个 viewport 更是另一个维度的战争。最稳的解法，还得是 vh（视窗高度单位）和 position: fixed 或者 flex 大法配合。

给你看看我最后爬出来的救命代码，给需要全屏的容器（比如一个背景图div或者整个主内容区）这么写：

.fullscreen {
  position: fixed; /* 或者 absolute，看是否需要滚动 */
  top: 0;
  left: 0;
  width: 100vw; /* 视窗宽度的100% */
  height: 100vh; /* 视窗高度的100% */
  /* 关键！对付移动端浏览器诡异工具栏 */
  height: -webkit-fill-available;
  height: 100dvh; /* 新标准，动态视窗高度 */
  min-height: -webkit-fill-available;
}

对，你没看错，为了兼容各种奇葩设备，高度属性我特么写了四行！尤其是那个 100dvh，算是目前解决移动端滑动时布局抖动相对最好的方案了，虽然也不是完全没坑。还有，用 fixed 你就得考虑内容怎么滚动了，不然就老老实实用 min-height: 100vh 放在普通文档流里。

千万别再信什么“一句CSS搞定全屏”的营销号文章了，老子就是信了它们的邪才浪费了整整一个周末，这里有篇血泪史帮你避坑。前端这玩意儿，每个像素后面都可能藏着个魔鬼，尤其是你想做到真正完美适配的时候。抽根烟冷静下，慢慢调吧，兄弟。