100vh不再安全？手机布局揭秘

咱们搞前端开发，时不时就得调调元素的高度，用CSS里那个叫vh（视口高度百分比）的单位，看着挺直接明了的不是？不过你知道吗，现在手机种类越来越多，用100vh来调高页面元素的高矮，有时候就闹出点小麻烦。关于这事儿，我就给你细细分析下为啥别太依赖100vh，还有怎么应对手机上那些布局问题呗！

Flex布局并非完美解决方案

在做网页设计时，很多人都喜欢用Flex布局来搞定一些超难搞的页面结构。比如说，你想让文字拖到最上面，按键拖到最下面，用Flex布局就能轻松搞定。只需把文字放到Flex的第一个小孩，然后把按键设成最后一个孩子就行！但是，问题来了，当你把这个简单的代码搬到手机上试试看，你会发现按键并没沉到底部，要么跑偏，要么给文字挡住了视线。

// HTML

  
Lorem ipsum dolor sit amet...
  Sign Up

// CSS
.layout {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100vh;
}

原因在于，CSS 里设定的 100vh，没把手机浏览器的工具条算进去！手机上这个工具条可是有点高，所以大家看到的页面实际上就比看起来矮了那么一截儿。这样的话，用了 100vh 的元素可能就过界或者被工具条盖住，让人看着不舒服。

移动设备上100vh问题根源

想深入明白为啥手机上看浏览器的时候有100vh（viewport units）的问题，首先得理解一下视口单位和现实可见面积的差别。视口单位就是整个浏览器窗口的尺寸，而现实中你能看到的部分其实已经去掉了工具栏啊、网址框之类的。所以，用100vh在手机上看网页时，就没算上那些附加组件，最后网页布局可能变得混乱或者缺失某些部分！

针对这个问题，你可以去网上看看比如像Stack Overflow这样的技术论坛，他们已经在热烈地讨论和研究怎么解决了。知道了原来网页默认不包括工具栏的高度后，你就会明白为啥100vh在手机上看起来不对劲儿，然后再去找找解决的办法！

尽量减少使用vh单位

手机显示100vh的问题？简单来，降低 VH 单位的依赖就行！举个例子，比如你做网页布局时，可以用 position: sticky这个属性来替代固定高度，就能灵活应对各种屏幕大小和浏览器了。再比如说，用sticky定位诀窍，只要稍微调下按钮跟底部的距离，就能轻松搞定了。

当然，有时候我们也得换个方法用 sticky 定位来搞定 100vh 的问题。比如说，当咱们要做那种跟视口高度差不多的登陆页时，光靠调整定位可不够，还得找别的办法解决在手机上看起来异常的问题！

fill-available属性修复100vh问题

除了用受欢迎的固定定位方法之外，我们还建议你尝试下字段填补属性（fill-available），这玩意儿能帮你解决因为100vh在手机上不好使而产生的布局问题~它会确保你的元素始终填充父亲容器的全部空白区域，对没法顾及到浏览器工具栏高度的100vh来说是个好补充哦～

// HTML

  
Lorem ipsum dolor sit amet...
  Sign Up

// CSS
.layout {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100vh;
}
.layout button {
  position: sticky;
  bottom: 0;
}

“fill-available”这个属性简单好懂,还能随设备旋转自动调节高度。不过用的时候也要注意，搞不好难免碰到些兼容性啊之类的小麻烦，需要细心调教才能保证 pages 漂亮地展示出来。

综合来看，咱们前端开发时可不能过分信赖CSS 100vh！利用好各种定位属性和单位值，根据具体需要来微调和改进，这样就能让软件运行得更顺畅，提高用户体验。

。