用css设置样式时,
width:100%
会自动填满整个屏幕的宽度,所以觉得设置height:100%
也会有同样的效果,但确实是被打脸了,设置height:100%
时,只会自动适应子元素的高度,想要填充整个屏幕的高度,只给该元素设置height:100%
是无法实现的。
- 在正常的HTML中,要使该元素自动填充整个屏幕的高度,必须给他的所有父级元素也设置
height:100%
<html style="height:100%;">
<body style="height:100%;">
<div style="height:100%;">
<p></p>
</div>
</body>
</html>
- 在小程序中,并没有HTML和body元素,那应该怎么样去设置让高度高度自动填充呢?因为小程序中有一个名叫page的注册页面的方法,所以应该如下设置:
<view class='firstInMain'>
<view class="setVoice {{showVoice?'':'hidden'}}">
<view class='setVoiceTitle'>这里是标题</view>
</view>
</view>
page{
height: 100%;
}
.firstInMain{
height: 100%;
}
.setVoice{
height: 100%;
}
.setVoiceTitle{
margin: 0 auto;
width: 200rpx;
}