當父元素設定了min-height: 100%時，子元素不會繼承高度

Question

我發現一個方法可以讓一個div容器佔據至少整個頁面的高度，方法是設定min-height: 100%;。然而，當我加入一個嵌套的div並設定height: 100%;時，它並沒有延伸到容器的高度。有沒有辦法修復這個問題？

html, body {
  height: 100%;
  margin: 0;
}

#containment {
  min-height: 100%;
  background: pink;
}

#containment-shadow-left {
  height: 100%;
  background: aqua;
}

<div id="containment">
  <div id="containment-shadow-left">
    Hello World!
  </div>
</div>

Answer 1

在父容器中新增height: 1px。在Chrome、FF和Safari中有效。

Answer 2

這是一個已報告的webkit（chrome/safari）bug，具有最小高度的父元素的子元素無法繼承height屬性：https://bugs.webkit.org/show_bug.cgi?id= 26559

顯然Firefox也受到影響（目前無法在IE中測試）

可能的解決方法：

• 在#containment中加入position:relative
• 在#containment-shadow-left中加入position:absolute

當內部元素具有絕對定位時，該bug不會顯示。

請參考http://jsfiddle.net/xrebB/

2014年4月10日編輯

#

由於我目前正在進行一個非常需要具有min-height的父容器和子元素繼承容器高度的項目，所以我進行了更多的研究。

首先：我不再確定目前瀏覽器行為是否真的是一個bug。 CSS2.1規範說：

如果我在容器上設定了min-height，我並沒有明確指定其高度 - 所以我的元素應該獲得一個auto高度。這正是Webkit - 和所有其他瀏覽器 - 所做的。

其次，我找到的解決方法：

如果我將容器元素設定為display:table並使用height:inherit，它的行為與給它一個min-height為100%完全相同。而且 - 更重要的是 - 如果我將子元素設為display:table-cell，它將完美地繼承容器元素的高度 - 無論是100%還是更多。

完整的CSS：

html, body {
  height: 100%;
  margin: 0;
}

#container {
  background: green;
  display: table;
  height: inherit;
  width: 100%;
}

#content {
  background: red;
  display: table-cell;
}

標記：

<div id="container">
  <div id="content">
      <p>content</p>
  </div>
</div>

請參考http://jsfiddle.net/xrebB/54/。