Question

我有一个容器，其百分比有和保持一定的宽高比我使用padding-top：在方法之后。我可以看到，浏览器正确设置高度。然后容器有一个高度和宽度百分比的儿童元素。但它不起作用。我错过了什么？

.parent {
    width: 50%;
    height: auto;    
    outline: 1px solid black;    
}
.parent:after {
    content: '';
    display: block;
    clear: both;
    padding-top: 50%;
}

.child {
    width: 40%;
    height: 40%;
    outline: 1px dashed red;   
}

这里是fiddle

Answer 1

使用position， padding只会添加宽高比空间 - 因此您需要使用position:a bsolute内容来忽略此空间，并position:relative向父级使用以便能够按照您的意图定位

.container {
    width: 100%;
    height: 100%;
    /*margin: 5px;*/
    position: relative;
    outline: 1px dotted green;
}

.parent {
    position:relative;
    width: 50%;
    height: auto;    
    outline: 1px solid black;    
}
.parent:after {
    content: '';
    display: block;
    clear: both;
    padding-top: 50%; /*15*/
  }

.child {
    float:left;
    width: 40%;
    height: 40%;
    outline: 1px dashed red;   
}
.content {
  position:absolute;
  width:100%;
  height:100%;
}

<div class="container">
    <div class="parent">
      <div class="content">
        <div class="child">Child</div>
      </div>
    </div>
</div>

Answer 2

除非显式声明父元素高度，否则不能使用百分比作为高度。否则高度将没有任何影响，就好像它根本不存在。根据{{3}}：

<强>＆LT;百分比＆GT;
指定百分比高度。百分比是根据生成的框的包含块的高度计算的。如果未明确指定包含块的高度（即，它取决于内容高度），并且此元素未绝对定位，则该值计算为“auto”。根元素的百分比高度相对于初始包含块。注意：对于其包含块基于块级元素的绝对定位元素，百分比是根据该元素的填充框的高度计算的。这是CSS1的变化，其中百分比始终是根据父元素的内容框计算的。

通过padding-top设置父亲的身高时设置孩子的身高

2 个答案: