絕對定位的子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 S， #content仍然充滿高度（好），但#dashboard變得只有“一些文本”的高度。 無論出於何種原因， 向#dashboard添加絕對定位的內容會改變其高度。

注意（編輯）

我不希望#content高度為100％，因為它需要隨着其他頁面上的內容而增長。 我只希望#dashboard正好是100％的高度。

jQuery有效，但我只想用css做

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

此外，我嘗試更改顯示類型以阻止或內聯#content並將-moz-box-sizing設置為默認值，因為我讀到它可以打破Firefox的最小高度。

知道如何解決這個問題嗎？

---

相似但不一樣： 如何設置父div的100％高度與絕對定位的子（不重復）？

Answer 1

來自MDN ：

min-height屬性的百分比值是根據生成的框的包含塊的高度計算的。 如果未明確指定包含塊的height （即，它取決於內容高度），並且此元素未絕對定位，則將百分比值視為0 。

因此，您需要明確指定#content元素的height ，以使#dashboard元素的min-height屬性起作用。

因此，嘗試使用#content height屬性而不是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>​

UPDATE

我不希望#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; top: 0; right: 0; bottom: 0; left: 0; #dashboard的高度為100％。 添加position: relative對於#content，如果#dashboard的高度應該相對於#content。

Answer 4

絕對元素從流程中取出。 如果他們不在流程中，他們就不會為父母增加身高。