親要素が min-height: 100% を設定すると、子要素は高さを継承しません。

Question

min-height: 100%; を設定することで、div コンテナが少なくともページの全高を占めるようにする方法を見つけました。ただし、ネストされた div を追加し、height: 100%; を設定すると、コンテナの高さまで拡張されません。この問題を解決する方法はありますか?

html, body {
  高さ: 100%;
  マージン: 0;
}

#封じ込め {
  最小高さ: 100%;
  背景: ピンク;
}

#containment-shadow-left {
  高さ: 100%;
  背景: 水色;
}

<div id="containment">
  <div id="containment-shadow-left">
    「こんにちは世界」
  </div>
</div>

Answer 1

親コンテナに height: 1px を追加します。 Chrome、FF、Safariで動作します。

Answer 2

これは報告された Webkit (chrome/safari) のバグです。最小の高さを持つ親要素の子要素は height 属性を継承できません: https://bugs.webkit.org/show_bug.cgi?id= 26559

どうやら Firefox も影響を受けるようです (現時点では IE ではテストできません)

＃＃＃可能な解決策：＃＃＃

#containment にposition:relative

を追加
• #containment-shadow-left にposition:absolute
を追加
このバグは、内部要素に絶対配置がある場合には発生しません。

http://jsfiddle.net/xrebB/

を参照してください。 2014 年 4 月 10 日編集

#

私は現在、min-height を持つ親コンテナーとコンテナーの高さを継承する子要素を実際に必要とするプロジェクトに取り組んでいるため、もう少し調査しました。

まず第一に: 現在のブラウザーの動作が実際にバグであるかどうかは、もはやわかりません。 CSS2.1 仕様には次のように書かれています:

コンテナに min-height を設定する場合、その高さを 明示的に 指定しているわけではないため、要素は

auto

高さを取得する必要があります。これはまさに Webkit や他のすべてのブラウザが行うことです。 2 番目に、私が見つけた解決策:

コンテナ要素を display:table に設定し、

height:inherit

を使用すると、min-height に 100% を指定したように動作します。同じ。そして、さらに重要なことに、子要素を display:table-cell に設定すると、コンテナ要素の高さが 100% 以上であっても完全に継承されます。 完全な CSS: リーリー ＃＃＃マーク：＃＃＃ リーリー

http://jsfiddle.net/xrebB/54/

を参照してください。