小程序100vh高度设置详解：快速解决页面布局难题

大家好呀！近在捣鼓小程序，被“100vh”这个小家伙折磨了好一阵子，感觉自己像掉进了兔子洞，各种奇奇怪怪的问题接踵而至。不过，现在总算有点眉目了，想跟大家分享一下我的“血泪史”，顺便也给还在迷茫中的小伙伴们指点迷津。

说起来，这“100vh”听起来很高大上，其实就是指手机屏幕的可见高度的。简单来说，就是你手机屏幕能显示出来的部分，从上到下，的高度就是100vh。这就好比咱们买布，100vh就是一整匹布的长度，你想裁多长，就用多少vh。

一开始，我天真地以为，只要设置height: 100vh;，就能让我的小程序页面占满整个屏幕。结果呢？呵呵，现实总是很残酷的。页面底部总是留白，或者干脆被导航栏和tabbar给遮住了一部分，我的页面就像被强行塞进了一个小盒子，各种委屈。

后来，我才知道，这100vh可不是万能的！小程序里，系统自带的导航栏和tabbar会占据一定的高度，这部分高度是包含在100vh里的。所以，如果你的小程序使用了系统自带的导航栏和tabbar，那实际可用的高度就会比100vh小一些。这就好比你买了一匹布，但是裁剪之前，还要先留出一部分布料做边角料，实际能用的布就少了。

那怎么办呢？难道我的页面就只能永远比屏幕矮一截了吗？当然不是！解决办法有很多，我这里就分享几个我常用的方法：

方法一：计算高度

直接的方法就是计算出导航栏和tabbar的高度，然后用100vh减去这个高度，就得到了实际可用的高度。比如，我的导航栏高度是44px，tabbar高度是50px，那么实际可用的高度就是100vh - 44px - 50px。当然，这个方法比较麻烦，需要先确定导航栏和tabbar的高度，而且不同机型的高度可能略有差异。

方法二：使用padding

我们可以巧妙地利用padding属性来解决这个在页面的父容器上设置padding-top和padding-bottom，值分别等于导航栏和tabbar的高度。这样，页面内容就会自动避开导航栏和tabbar，实现全屏显示。这个方法比较简单，而且不需要计算实际可用的高度。

方法三：使用position:fixed

如果你想让某些元素固定在屏幕顶部或底部，可以使用position: fixed属性。比如，你想让一个按钮固定在屏幕底部，就可以设置position: fixed; bottom: 0;。这样，这个按钮就不会被tabbar遮挡。这个方法非常灵活，可以根据实际需求来调整元素的位置。

下面，我做了个方便大家对比这几种方法的优缺点：

在实际开发中，我发现，很多时候，直接用height: 100vh;就能满足需求，特别是当小程序没有使用系统自带的导航栏和tabbar时。 但如果使用了自定义导航栏或者想要实现一些更精细的布局效果，上面提到的方法就非常重要了。 例如，我之前开发一个展示图片的小程序，就需要精确控制图片的高度，使其充满屏幕，这时计算高度的方法就派上了大用场。而另一个需要固定底部工具栏的小程序，则用上了position: fixed，非常方便快捷。

100vh这个属性虽然简单，但实际应用中需要注意很多细节。 灵活运用各种方法，才能更好地掌控它，让我们的页面在小程序里完美呈现。 其实，小程序开发就是一个不断学习和实践的过程，多尝试，多才能在代码的世界里游刃有余！

说到这里，其实我还想问问大家，你们在使用100vh的过程中，都遇到过哪些有什么好的技巧或者经验可以分享吗？ 我很乐意和大家一起交流学习，共同进步！