关于设置百分比宽高失效的问题

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了关于设置百分比宽高失效的问题相关的知识,希望对你有一定的参考价值。

参考技术A

有时候在写页面样式会设置百分比来控制一个元素的宽高.

我们也都知道百分比是从父元素的宽高计算而来的.

但有时候,结构写的太多了,复杂了,偶尔会出现设置百分比失效的情况.

由于界面结构太复杂了,一时半会也找不到为什么百分比会失效.

也没有总结过一些规律.所以趁着这会儿有时间,专门研究了了一下.

什么情况下会导致百分比失效的问题.

结论:

发现只有宽度有效(因为父级显式的设置了200px).

而高度无效(高度是动态的,根据内部内容撑开,而非显式写出)

结论:

发现并不会.

设置百分比,只会往上找一级,从自己的直接父元素来获取并计算.

百分比计算只涉及父子两层

设置百分比总结:

补充:

以上是关于关于设置百分比宽高失效的问题的主要内容,如果未能解决你的问题,请参考以下文章

android PercentRelativeLayout 支持百分比来设置控件的宽高

关于移动端rem布局

border-radius的理解

设置元素宽高为铺满屏幕的方式(巧妙使用单位vw和vh)

设置元素宽高为铺满屏幕的方式(巧妙使用单位vw和vh)

嵌入到企业内部的网页怎么做到宽高自适应