vue移动端高度自适应 100vh不够

Posted 2023-03-23

参考技术A 有时候会使用100vh，刚进入页面时是合适的，但是若果页面高度是动态添加的，那么当页面实际高度超过100vh的时候，100vh的高度设置就不够了。
例如：

↑此时外部容器为100vh 刚好合适

↑但是我添加步骤 高度超过100vh 就不够了

解决办法：
在app.vue中设置

#app
height: 100%;

html,body
height: 100%;

在你要适配的页面，将父容器的高度设为：



如果你的背景是一张图片，那么就这样：
#home
width: 100%;
height: 100%;
overflow: scroll;
background-color: rgb(26, 28, 35);
background-image: url("../assets/bg.png");
background-size: 100%;