【郭巍的回答：九宫格使用百分比替换固定单位px后，整个格子不见了 _九宫格 _自适应】

九宫格使用百分比替换固定单位px后，整个格子不见了

我也踩过这个坑( 14 )

已统计您的踩坑,无需重复点击

回答(11)

九宫格自适应

详细描述

截图

代码

.swag{
  width:30%;
  height:30%;;
  margin:1%;
  border-radius: 20%;
  background: orange;
  float: left;
}

编辑于2024-09-07

[上海|荣耀师兄]JS-郭巍

可以使用height:30vw，或者是padding-top:30%，1vw是屏幕宽度的1%，padding在使用%时，是根据父元素的宽度来获取的，元素的宽度一般默认是auto，会铺满整个屏幕的宽度。但是高度的计算方式和宽度不一样，浏览器根本不计算内容的高度，除非内容超出了视窗范围(导致滚动条出现)。或者你给整个页面设置一个绝对高度。否则，浏览器就会简单的让内容往下堆砌。

因为页面根元素的html元素的高度为auto(实际上为0)，body的height也为0，所以，当你让一个元素的高度设定为百分比高度时，父级的高度如果是auto，那你的子级设置%高度，就无法取到实际值。

因为父级元素的高度是由该元素里面的内容撑起的，在不设置该圆素高度的前提下。

于是子元素的高度height: 30% 不会起作用。

编辑于2020-08-05

时间排序

热门排序

[散修弟子]CSS-8946
0

html,body{height:100%}

body 里面的 div 就可以设置 % 高度了。

查看全部>

编辑于2020-08-05

去第页