Question

由于某种原因，内部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 Demo

Answer 1

属性height:inherit;将使子项与父项具有相同的height值。在您的情况下auto，这意味着它适应其内容。由于#insidediv没有内容，因此它的高度为0。

如果您希望#insidediv具有与其父级相同的高度（这意味着它应该覆盖父级的内容），您可以执行此操作：

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

从auto height div继承高度

1 个答案: