摘要
有时我们会遇到这样的需求,制作一个自适应页面的方形元素,这时我们就要借助百分比进行布局了。如果我们在布局的过程中不做处理采用常规的布局,往往得到的结果并不是我们想要的。原因在于:高度的百分比是相对于父级的高进行计算的。
我们在制作网页的过程中,很多时候为了某些特定需求需要借助百分比进行宽、高布局。用过百分比的人都知道,设置百分比的元素是相对于父级进行计算的。所以,我们在使用百分比设置宽、高的过程中要注意其父级宽和高的设置。
有时我们会遇到这样的需求,制作一个自适应页面的方形元素,这时我们就要借助百分比进行布局了。如果我们在布局的过程中不做处理采用常规的布局,往往得到的结果并不是我们想要的。原因在于:高度的百分比是相对于父级的高进行计算的。
为了实现自适应页面的方形元素,很多朋友可能会借助JS来解决。对于这种解决方案,笔者也是认同的。
今天,笔者介绍一种更为巧妙的布局方式,仅仅借助CSS(CSS黑科技)就能让百分比的值达到统一。
- E {
- position: relative;
- width: 100%;
- height: 0;
- padding-top: 100%;
- }
- E F {
- position: absolute;
- left: 0;
- top: 0;
- width: 100%;
- height: 100%;
- }
看到这样的代码,有些人可能有点不解。为什么我们要设置E元素的height为0,而给padding-top百分百呢?
原因是这样的:padding的百分比是相对于父级的宽来设置的,通过这种方式,我们便达到了宽和高的统一。这时,我们只要把需要的元素定位到父元素上就好了。