Question

在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获得其高度（200px），即使B位于层次结构中它们之间。你可以想象一种情况，其中嵌套比这个例子要多得多，在这种情况下，将height: 100%添加到每个中间元素都很麻烦。

Answer 1

使用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>

Answer 2

div C从B获得高度，如果B是继承，则从A获得它。将其添加到B类：

height:inherit;

我用颜色标记div，评论它看看我做了什么。

https://jsfiddle.net/0saut255/1/

Answer 3

您可以创建一个主类来保存100％高度规则，然后将其添加到链中的所有div。这只会将问题转移到HTML而不是CSS，但它会将100％的高度传递给所有的孩子

.A {
height: 200px;
}
.fullHeight {
height: 100%;
}

然后在你的HTML

中

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

底线是，无论你选择什么方法，你都必须用一些指示标记每一层，它应该在上面的元素中查看高度。

Answer 4

你可以添加.A div {height：100％;在你的CSS上，如果需要你需要调整B使用的高度！重要。例如：.B {身高：150px！重要; }

.A{ height: 300px; }
.A div{ height: 100%; }
.B{ width: 500px; height: 200px !important; }
.C{ width: 100px; }

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

CSS高度继承，跳过几代

4 个答案: