- 移动端解决高度设为100vh时，页面超出窗口问题
问题引入：在做uniapp和微信小程序项目时，在底部或者顶部存在原生tabar和导航栏时，将整个页面最外面的高度设为100vh（目的是想其撑满整个界面），结果因为tabar和导航栏高度的存在，页面设为100vh（百分百高度）过于满了，会产生滚动条，如下两图，设置100vh后，可以将整个页面拉上来，然后上面部分被顶部掩盖住了
- 解决方案:uni.getWindowInfo
1、uniapp
官方文档：
https://uniapp.dcloud.net.cn/api/system/getWindowInfo.html#getwindowinfo
利用这个api可以获取可使用窗口的高度，或者可使用窗口底部或顶部的位置
通过这个距离，动态设置CSS里的高度，即可在有导航栏的情况下，还能正确的将页面撑满
动态设置CSS样式代码：
HTML：
<view class="contentD" :style="{height:btom}">
想让这个div撑满整个页面
</view>
JS:
export default {
data() {
return {
btom:""
}
},
mounted() {
this.btom = uni.getWindowInfo().windowHeight+"px"
console.log(this.btom);
}
}
CSS不用再特定设定高度
2、微信小程序
小程序和uniapp解决办法差不多，这里就不赘述了
https://developers.weixin.qq.com/miniprogram/dev/api/base/system/wx.getWindowInfo.html
文章来源：https://www.toymoban.com/news/detail-551411.html
目前在H5端和移动端写了几个页面测试了一下，都没有什么问题，如果大家有什么问题或者有更好的解决方法请给我留言文章来源地址https://www.toymoban.com/news/detail-551411.html
到了这里，关于【无标题】 移动端解决高度设为100vh时，页面超出窗口问题的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
