设置height:100%;无效果的解决方法

用css设置样式时,width:100%会自动填满整个屏幕的宽度,所以觉得设置height:100%也会有同样的效果,但确实是被打脸了,设置height:100%时,只会自动适应子元素的高度,想要填充整个屏幕的高度,只给该元素设置height:100%是无法实现的。

  1. 在正常的HTML中,要使该元素自动填充整个屏幕的高度,必须给他的所有父级元素也设置height:100%
<html style="height:100%;">
    <body style="height:100%;">
        <div style="height:100%;">
            <p></p>
        </div>
    </body>
</html>
  1. 在小程序中,并没有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;
}

猜你喜欢

转载自blog.csdn.net/maid_04/article/details/80319506