父级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，则两者都是屏幕的完整高度。

但是，当我添加.widget时，#content仍然是全高度（好的），但#dashboard仅成为“某些文本”的高度。出于某种原因，向#dashboard添加绝对定位内容会改变其高度。

注意（编辑）

我不希望#content的高度为100％，因为它需要根据其他页面上的内容增长。我只想让#dashboard的高度正好为100％。

jQuery可以解决问题，但我想仅使用CSS来解决它。

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

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

您有什么解决方法吗？

---

类似但不完全相同：如何设置父 div 的高度为 100％，并具有绝对定位的子元素（不是重复）？

- AJcodez

Answer 1

从MDN：

引用：

对于 min-height 属性的百分比值是相对于生成框的包含块的高度计算的。如果未显式指定包含块的高度（即它取决于内容高度），并且此元素未绝对定位，则将百分比值视为 0。

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

因此，请尝试使用height属性替代#content的min-height：

#content {
  height: 100%;
}

这是一个 jsDiddle 示例。

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 元素。

- Hashem Qolami

---

我不希望 #content 始终是全尺寸的。我希望它在其他页面上无限延伸... - AJcodez

那么你为什么使用 min-height ？？ 不过，你可以使用任何百分比或像素。 - Hashem Qolami

我希望它占据整个屏幕或扩展。这就是min-height的作用，不是吗？ - AJcodez

请告诉我您确切的意思。 - Hashem Qolami

修改后的问题。您的解决方案可以工作，但#content是一个居中的内容div，位于页面中央的背景中，因此我不能有溢出的内容，也不能让它滚动，否则我会在页面中央有一个滚动条！ - AJcodez

Answer 2

绝对定位的元素不再参与布局。父元素无法确定子项的大小。

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

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

body, html { height:100% }

- Diodeus - James MacFarlane

---

父元素 (#dashboard) 的高度被指定为100%。 - Kevin Boucher

+1 的高度在 100% 时只占其父元素的 100%，在这种情况下是 body、html :) - http://jsfiddle.net/mcAXP/ - Aaron

#content 被设置为 min-height: 100%，但根据 @Hashem 的说法，将其设置为 height: 100% 可以解决问题。-- 然而，显然这对 OP 不起作用。 - Kevin Boucher

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，则在#content中添加position: relative。

- Felix Ebert

---

不太对，#content浮动并在另一个div下面。感谢“auto”提示！ - AJcodez

Answer 4

绝对定位的元素脱离了文档流。 如果它们不在文档流中，它们不会添加高度给父元素。

- JimmyRare

---

父元素(#dashboard)的高度被指定为100%。 - Kevin Boucher

因为OP似乎没有意识到绝对定位会将元素从流中移出。（即这不是问题所在。） - Kevin Boucher

由于OP不知道如何使用高度属性，我认为需要澄清绝对定位的问题。由于我的声望较低而无法评论，所以我回答了这个问题。我有点做错了。我应该删除它吗？ - JimmyRare

我并没有这样的印象。他说只要子DIV不是“position: absolute”，height: 100%就可以工作。我在我的fiddle中验证了这一点：http://jsfiddle.net/kboucher/4zwyW/。（将`#content`的`min-height`更改为`height`，然后查看它的工作情况。） - Kevin Boucher

height: 100% 应该使元素高度达到100%，不受子元素定位的影响。（假设父元素允许） - Kevin Boucher