javascript - 具有绝对定位子 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 设置为 min-height 100% 和 height 100% 并且有效。如果我注释掉绝对定位的 div，它们都是屏幕的全高。

但是当我添加 .widget 时，#content 仍然是全高(好)但是 #dashboard 变成只有'一些文字'。无论出于何种原因，将绝对定位的内容添加到 #dashboard 会改变其高度。

注释(编辑)

I don't want #content to be 100% height because it needs to grow with content on other pages. I only want #dashboard to be exactly 100% height.

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 :

A percentage value for min-height property is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the percentage value is treated as 0.

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

因此，尝试为 #content 使用 height 属性而不是 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>​

更新

I don't want #content to be full-size at all times.

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

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

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

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