Question

在下面的代码中，子的(inline-block)宽度扩展到其父级计算宽度的100％，但我不知道为什么height的{{1}}没有扩展到.child计算身高。

.parent's

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.ancestor {
  height: 250px;
  border: 1px solid green;
}

.parent {
  display: block;
  padding: 20px;
  border: 1px solid #474747;
  background-color: #fff;
}

.child {
  display: inline-block;
  width: 100%;
  height: 100%;
  background-color: pink;
}

我更感兴趣的是了解这种行为背后的逻辑而不是解决方案。有人可以解释一下这种情况。

谢谢

Answer 1

IntentService只有在父元素具有已定义的高度设置时才有效。如果该高度设置也是一个百分比值，那么祖父母也需要一个定义的高度，这同样适用于最多height: 100%;和body的所有祖先，除非其中一个具有绝对的高度设置值（px，em或类似）或html，它们相对于视口。

为什么内联块不会扩展到父计算高度？

1 个答案: