从自动高度的div继承高度

Question

由于某些原因，内部 div 没有获取与其父级 div 相同的高度，尽管它继承了父级 div 的高度。如何使这个 div (insidediv) 获得与父级 div 相同的高度？

HTML：

<div id="container">
    <p>Some text</p>
    <p>Some text</p>
    <div id="insidediv"></div>
</div>

CSS:

#container {
    height:auto;
    border:1px solid black;
}

#insidediv {
    border:1px solid red;
    height:inherit;
}

JSFiddle演示

- Daan

---

因为你没有给它定义高度。演示 - Ruddy

auto => 继承 auto, 100px => 继承 100px http://jsfiddle.net/f7xBr/2/ - Roko C. Buljan

就像@Ruddy所说，您需要设置实际高度才能让它继承。这里有一种解决问题的替代方法：http://jsfiddle.net/NicoO/f7xBr/4/ - Nico O

@Nico 给出了有用的建议，这取决于 OP 是否希望它完全覆盖父 DIV（看到了吗？没有文本选择或链接交互）。 - Roko C. Buljan

如果您将内部div的高度设置为与外部div相同，则由于其上方的内容，它将溢出外部div。您想要实现什么目标？ - Pete

好观点@RokoC.Buljan，这真的取决于用例。如果您只想要一个背景容器（可以是：after或:before而不是专用的html元素），则可以添加z-index：-1;，但这只会移动问题。这是一个演示：http://jsfiddle.net/NicoO/f7xBr/12/. - Nico O

Answer 1

属性height:inherit;会使子元素具有与父元素相同的height值。在您的情况下，auto表示它会适应其内容。因为#insidediv没有内容，所以它的高度为0。

如果您想要#insidediv与其父元素具有相同的高度（这意味着它应该覆盖父元素的内容），您可以这样做：

#container {
  height: auto;
  border: 1px solid black;
  position: relative;
  z-index: 1;
}
#insidediv {
  border: 1px solid red;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: -1;
}

<div id="container">
  <p>Some text</p>
  <p>Some text</p>
  <div id="insidediv"></div>
</div>

- web-tiki

---

有没有其他方法可以在不使用相对和绝对定位的情况下获得上述结果？ - user4292106

web-tiki，感谢您的回答。我使用了flex-box，问题得到了解决！ - user4292106