Question

我想谈谈CSS中的继承。如果父项具有height属性（100%），那么每个想要继承该高度的子项都可以直接声明。我的意思是：不需要将子父母的身高设置为100％。

像这样：

body {
  height: 200px;
}

.div_1 {
  height: 100%;
}

.div_2 {
  height: 100%;
}

.div_3 {
  height: 100%;
  background-color: #ccc;
}

<div class="div_1">
  <div class="div_2">
    <div class="div_3">foo</div>
  </div>
</div>

根高度为：200px。 body是父标记，.div_3是子标记。因此，如果我想在body标记中使用相同的高度，我必须定义.div_1和.div_2的高度。

如果没有，那应该是：

body {
  height: 200px;
}
/*
.div_1 {
  height: 100%;
}

.div_2 {
  height: 100%;
}
*/
.div_3 {
  height: 100%;
  background-color: #ccc;
}

<div class="div_1">
  <div class="div_2">
    <div class="div_3">foo</div>
  </div>
</div>

如果我只有3个div标签就好了，如果我有这样的模板会发生什么：

<div class="div_1"> <!-- need an 'inherit' height -->
    <div class="this"> <!-- need an 'inherit' height -->
        <div class="is"> <!-- need an 'inherit' height -->
            <div class="a"> <!-- need an 'inherit' height -->
                <div class="lot"> <!-- need an 'inherit' height -->
                    <div class="of"> <!-- need an 'inherit' height -->
                        <div class="sub-parent"> <!-- need an 'inherit' height -->
                            <div class="div_2"> <!-- need an 'inherit' height -->
                                <div class="div_3">foo</div> <!-- height: 100% -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

为什么我们需要为每个子父母做同样的事情？ height: 100%;或height: inherit;？

应该浪费时间。

Answer 1

如果您只想让其所有子元素都有height: 100%，则可以使用通用CSS选择器*。

.div_1, .div_1 * {
    height: 100%;
}

如果要将其应用于所有子div元素，可以使用：

.div_1, .div_1 div {
    height: 100%;
}

如何在css中使用继承高度？

1 个答案: