今天学到一个很不错的CSS技巧：Zihua Li
一个两列比例布局，比如左边栏80%，右边栏20%，所以右边栏的width是不知道的，但是无论右边栏的width是多少，都要求height和width保持1：1的比例。不需要js，用纯css也可以实现这个效果
原理主要是2点：
1、当设置padding为百分比的时候，参照是父元素的width，这点和设置子元素的width行为是一致的。比如这个DOM：
<div style="width: 100px"> <div id="son">abc</div> </div>讯享网
讯享网#son { width: 20%; padding-bottom: 20%; }
计算出son的width和padding-bottom都是相对于parent的20%，即都是20px，这样就可以实现高宽比的任意比例
2、overflow的计算是包括了content和padding，所以只要padding够大，即使content是0，内容一样可以显示出来
所以，结合以上2点，就可以用纯CSS实现高度宽度固定比例的效果：
div { width: 20%; padding-bottom: 20%; height: 0; }
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/127513.html