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的最小高度。

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

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

Answer 1

来自MDN：

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

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

因此，请尝试使用height的{{1}}属性代替#content：

min-height

这是 jsDiddle Demo 。

#content { height: 100%; }

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

否则，您应该使用JavaScript来计算所需的高度并将其应用于#content { height: 200px; /* or whatever you want */ } #dashboard { height: 100%; /* or inherit */; }元素。

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

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

绝对定位的子div的父div拒绝100％的高度

4 个答案: