具有绝对定位子 div 的父 div 拒绝 100% 高度

Question

我想要一个 100% 高度的 div，其中包含绝对定位的 div。无论出于何种原因，当我添加子 div 时，父 div 的高度都会缩小到静态内容大小。

为了澄清，我确实不希望绝对定位的元素是全高的。只是包含 div。

我有（简化的）标记如下：

<div id="content">
   <div id="dashboard">
      Some text
      <div class="widget"></div>
      <div class="widget"></div>
      ...
   </div>
</div>

还有样式：

#content {
  min-height: 100%;
}
#dashboard {
  min-height: 100%;
  height: 100%;
  position: relative;
}
.widget {
  height: 50px; /* arbitrary */
  width: 50px;
  position: absolute;
}

我已将 #content 和 #dashboard 设置为最小高度 100% 和高度 100% 并且有效。如果我注释掉绝对定位的 div，它们都是屏幕的全高。

但是当我添加.widgets 时，#content 仍然是全高（很好），但#dashboard 只是“一些文本”的高度。无论出于何种原因，将绝对定位的内容添加到 #dashboard 会改变其高度。

注释（编辑）

我不希望 #content 达到 100% 的高度，因为它需要增长 与其他页面上的内容。我只希望#dashboard 正好是 100% 高度。

jQuery 工作，但我想只用 css 来做

$("#dashboard").height( $("#content").height() );

我还尝试将 #content 的显示类型更改为阻止或内联，并将 -moz-box-sizing 设置为默认值，因为我读到它可能会破坏 Firefox 的最小高度。

知道如何解决这个问题吗？

---

类似但不一样：How to set 100% height of a parent div with absolutely positioned children (not a duplicate)?

Answer 1

来自MDN：

min-height 属性的百分比值使用以下公式计算 相对于生成框的包含块的高度。 如果包含块的height没有明确指定（即它取决于内容高度），并且该元素不是绝对定位的，则百分比值被视为0强>。

因此，您需要明确指定#content 元素的height 才能使#dashboard 元素的min-height 属性起作用。

因此，请尝试使用 height 属性为 #content 而不是 min-height：

#content {
  height: 100%;
}

这是一个jsDiddle Demo。

html, body {
    height: 100%;
}
#content {
  height: 100%;
}
#dashboard {
  min-height: 100%;
  position: relative;
}
.widget {
  height: 50px; /* arbitrary */
  width: 50px;
  position: absolute;
}​

<div id="content">
   <div id="dashboard">
      Some text
      <div class="widget"></div>
      <div class="widget"></div>
      ...
   </div>
</div>​

更新

我不希望 #content 在任何时候都是全尺寸的。

然后，您需要为#content 使用固定高度：

#content {
  height: 200px;  /* or whatever you want */
}

#dashboard {
  height: 100%;   /* or inherit */;
}

否则，您应该使用 JavaScript 计算所需的高度并将其应用于 #dashboard 元素。

Answer 2

绝对定位的元素不再是布局的一部分。父元素不知道子项有多大。

需要手动设置父元素的高度，或者使用JS计算子元素的大小并相应应用。

此外，高度为 100% 的元素也需要其父元素的高度为 100%：

body, html { height:100% }

Answer 3

当您希望#content 的最小高度为 100%（最小 100%，当有更多内容时展开），请使用 min-height 和 height: auto：

body, html {
  height: 100%;
}
#content {
  min-height: 100%;
  height: auto;
}

此外，如果我正确理解您的问题，您可以简单地将position: absolute 与top: 0; right: 0; bottom: 0; left: 0; 一起使用，使#dashboard 的高度正好为100%。如果#dashboard 的高度应该相对于#content，则将position: relative 添加到#content。

Answer 4

从流中取出绝对元素。 如果他们不在流程中，他们不会给他们的父母增加高度。