div 元素不会从其浮动父元素继承以 % 为单位的高度，而是从其父级继承

Question

我对forowing代码有问题

header {
Position : absolute;
Display: inline-block;
Width: 15%;
Height: 100%;
Left: 0;
Top: 0;
}
.headerchild {
Display: block;
Width: 100%;
Padding-bottom: 20%;
Float: left;
}
Headerchildchildeader {
Position : absolute;
Display: inline-block;
Width: 80%;
Height: 100%;
Left: 20%;
}

问题是我的headerchildChild计算了其父母标题的高度，而不是从其父级标题

Answer 1

我想我有你想要的。

您所要做的就是添加位置 headerchild中的属性儿童班级，.i.e。

 .headerchild {
   position: relative; //newly added property
   Display: block;
   Width: 100%;
   Padding-bottom: 20%;
   Float: left;
}