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