很多时候,我们会希望将内容充满整个屏幕(高度、宽度100%),如下图
但是我们设置好page{height:100%;}发现页面并不是满屏,反而好像是溢出了,导致真机测试的时候可以上下滑动。
想要解决这个问题,我们加入一行css代码即可。
position: fixed;
示例:
wxml文件
<view class="bgView">
<image src='./../../images/temporaryImages/indexBg.png' class='indexBgImg'></image>
<form name='pushMsgFm' report-submit bindsubmit='logInSubmit'>
<button form-type="submit" class='logInButton'>登录</button>
</form>
</view>
wxss文件
page {
width: 100%;
height: 100%;
}
.bgView {
position: fixed;
height: 100%;
width: 100%;
}
.indexBgImg {
width: 100%;
height: 100%;
}
.logInButton {
position: absolute;
width: 40%;
top: 65%;
left: 30%;
background-color: #4f758a;
color: white;
font-size: 28rpx;
opacity: 0.8;
}