3

我想要一个 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 absolute Position children (not a duplicate)?

4

4 回答 4

4

来自MDN：

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

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

因此，请尝试使用height属性 for#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元素。

于 2012-10-17T21:27:16.340 回答
2

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

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

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

body, html { height:100% }
于 2012-10-17T21:23:01.420 回答
1

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

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

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

于 2012-10-17T22:39:12.220 回答
0

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

于 2012-10-17T21:25:52.320 回答