html - CSS高度继承，跳过世代

在CSS中，可以使用height或height: 100%将元素X的height: inherit属性设置为与X的父元素相同的高度。仅当X的父级指定其高度时，该方法才有效。

有没有办法使元素从具有指定高度的最近祖先继承高度？

因此在这种情况下：

index.html

<div class="A">
    <div class="B">
        <div class="C">
            Content
        </div>
    </div>
</div>

index.css

.A {
    height: 200px;
}

.C {
    height: 100%;
}

即使C位于层次结构之间，A也会从B获得高度（200像素）。您可以想象这种情况下的嵌套比本示例中的要多得多，在这种情况下，向每个中间元素添加height: 100%很麻烦。

最佳答案

使用CSS选择器。创建一个div包装器（或将.A设置为包装div），然后执行.wrapper div {height: 100%;}。这会将样式应用于您在包装div下指定的任何元素。

资料来源：css all divs vs direct child divs

.A {
    height: 60px;
    border:solid 1px black;
}
.B {
  height:inherit;
  background-color: blue;
}

.C {
    height: 100%;
    border:solid 1px blue;
}

.D {
  height: 30px;
  background-color: green;
  border: 1px solid white;
}

.E {
  padding: 10px;
}

.wrapper div {
  height: 100%;
  background-color: red;
  border: 0px;
}

<div class="wrapper">

<div class="A">
    <div class="B">
        <div class="C">
            <div class="D">
                <div class="E">
                    Content
                </div>
            </div>
        </div>
    </div>
</div>

</div>