html - div 元素不会从其 float 父元素继承高度(以 % 为单位)，而是从其父元素继承高度

Question

下面的代码有问题

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 从其父级 header 而不是从其父级 headerchild 计算高度

Answer 1

我想我得到了你想要的。

你所要做的就是在headerchild子类中添加position属性，即

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