移动端或小程序布局之min-hight

摘要

今天开发时遇到一个问题，由于现在手机全面屏的慢慢普及，所以现在手机又16:9、18:9、19:9、20:9等等的各种尺寸。所以当有时候一些场景，例如有背景图的时候，设置自适应100vh并不适用，可能会显示的非常怪，甚至在16:9的场景中会出现显示不全的情况。这个时候我觉得min-hight是非常好的一种方法。

问题：背景图显示，但是在20:9的屏幕占不满会有空白，在16:9的屏幕信息显示不全

解决方式：父元素背景色，100vh来解决20:9占不满的问题，再加上min-height属性来解决16:9的屏幕显示不全的问题。

定义

很明显的从名称就可以看出来：min-height 属性是设置元素的最小高度。

例如下面这个例子

不设置min-hight

在iPhone x显示：

 在iPhone 6显示：

 如果我们骑车下面的那个小地图是我们需要显示的信息，那么在iPhone 6中很显然显示不到，如果我们设置了min-hight则可以显示

设置min-hight

在iPhone x显示：

  在iPhone 6显示：（滚动到底部的效果）