使用box-sizing继承父级的高度：border-box

Question

这是合约。 我有css的父div：

.parent{box-sizing: border-box; height: 60px; border: 1px solid green;}

带css的子div：

.child{height:inherit;background: red}

这是标记：

.parent {
  box-sizing: border-box;
  height: 60px;
  border: 1px solid green;
}

.child {
  height:inherit;
  background: red;
}

<div class="parent">
  <div class="child"></div>
</div>

https://jsfiddle.net/CheWebDev/fcecuvut/1/

那么如何从父级获得继承高度？是否可以使用box-sizing：border-box prop。？

Answer 1

为什么不使用height: 100%。因为这与设置height: inherit基本相同。如果height: inherit使其成为父级的确切高度，height: 100%将根据父级规则生成它。

因此，如果填充（在您的情况下是边框），它将不会溢出填充。但只填充其父级的可用高度。

.parent{box-sizing: border-box; height: 60px; border: 10px solid green;}
.child{height:100%;background: red}

   <div class="parent"><div class="child"></div></div>