[解決済み】min-height: 100% の親の中にいる子の高さが継承されない。

質問

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>

解決方法は？

これは webkit (chrome/safari) で報告されているバグで、min-height を持つ親の子は height プロパティを継承することができないのです。 https://bugs.webkit.org/show_bug.cgi?id=26559

どうやらFirefoxも影響を受けているようです（現在IEではテストできません）。

可能な回避策

• コンテントにposition:relativeを追加
• content-shadow-left に position:absolute を追加します。

内側の要素が絶対位置決めされている場合は、このバグは表示されません。

参照 http://jsfiddle.net/xrebB/

2014年4月10日に編集

現在、私が担当しているプロジェクトがあるため 本当に を持つ親コンテナが必要です。 min-height で、子要素はそのコンテナの高さを継承している。

まず 今のブラウザの挙動が本当にバグなのかどうか、もうよくわからない。CSS2.1の仕様にはこうあります。

の高さを基準に計算されます。 生成されたボックスの包含ブロックです。含むブロックの高さが ブロックが明示的に指定されていない場合（すなわち、コンテンツ 高さ)、この要素が絶対位置でない場合、この値は は 'auto' に計算される。

コンテナに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/ .