微信小程序填坑之路之宽高设置百分比无效果

  • • 发表于 3个月前
  • • 作者 toBeMN
  • • 614 次浏览
  • • 12 条评论
  • • 最后编辑时间 3个月前
  • • 来自 [技术]

原创声明:本文为作者原创,未经允许不得转载,经授权转载需注明作者和出处

通过例子看本质,先写一个简单的例子
布局文件:

样式文件:

最终的效果去不是全屏:

这是为什么呢,首先要知道设置百分比是什么意思,既然是百分比,那一定要有一个参照物,那就是它的父元素
在例子中,是对根元素(类似html中的body)设置百分比,所以它的根元素是page
但page没有设置高度、宽度呀,所以这是后设置百分比就属于失效的,想让它全屏那就直接设置父元素的宽高

效果是不是出来啦

或者直接在container里写上position:absolute也会有一样的效果,因为absolute是根据已定位的父元素设置位置的,还省了特意写一个page

对于图片也是一样的

只写百分比

效果可想而知

现在加上position

最终效果:

如果我哪里理解错了欢迎指正

分享到:
评论区(共12条评论)
12条评论
Ctrl+Enter
作者

toBeMN

toBeMN

APP:3 帖子:23 回复:59 积分:2436

已加入社区[108]天

梦想成为全栈的男人

作者详情》
精品推荐课程更多
扫码入群
Top