min-heightを持つ親の中の子：100％は高さを継承しません

を設定することで、divコンテナがページの高さ全体を占めるようにする方法を見つけましたmin-height: 100%;。ただし、ネストされたdivを追加してsetすると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でテストできません）

可能な回避策：

• 位置を追加：#containmentを基準
• ＃containment-shadow-leftにposition：absoluteを追加します

内部要素が絶対位置にある場合、バグは表示されません。

http://jsfiddle.net/xrebB/を参照してください

2014年4月10日に編集

現在、の親コンテナーとコンテナーの高さを継承する子要素が本当に必要なプロジェクトに取り組んでいるためmin-height、さらに調査を行いました。

まず、現在のブラウザの動作が本当にバグなのかどうか、もうよくわかりません。CSS2.1仕様は言う：

パーセンテージは、生成されたボックスの包含ブロックの高さに対して計算されます。包含ブロックの高さが明示的に指定されておらず（つまり、コンテンツの高さに依存している）、この要素が絶対的に配置されていない場合、値は「自動」に計算されます。

コンテナに最小高さを設定した場合、その高さを明示的に指定していないため、要素のauto高さを取得する必要があります。そして、まさにそれがWebkit（および他のすべてのブラウザー）が行うことです。

次に、私が見つけた回避策：

コンテナ要素をdisplay:tablewith に設定すると、100％のheight:inherit場合とまったく同じように動作しmin-heightます。そして、さらに重要なことですが、子要素を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/を参照してください。

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

私はこれをどこにも見なかったので、私はこれを共有するだろうと考えました。そして、私が私の解決策を修正するために使用したものです。

ソリューション：min-height: inherit;

私は指定された最小の高さを持つ親がいて、子供もその高さである必要がありました。

.parent {
  min-height: 300px;
  background-color: rgba(255,255,0,0.5); //yellow
}

.child {
  min-height: inherit;
  background-color: rgba(0,255,0,0.5); //blue
}

p {
  padding: 20px;
  color: red;
  font-family: sans-serif;
  font-weight: bold;
  text-align: center;
}

<div class="parent">
  <div class="child">
    <p>Yellow + Blue = Green :)</p>
  </div>
</div>

このようにして、子供は最小高さの100％の高さとして機能します。

私は一部の人々がこれが便利だと思います:)

これは@jackocnrのコメントに追加されましたが、見逃しました。最近のブラウザでは、これが最善のアプローチだと思います。

コンテナが小さすぎる場合は内部要素でコンテナ全体を埋めますが、大きすぎる場合はコンテナの高さを拡張します。

#containment {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

#containment-shadow-left {
  flex: 1;
}

Kushagra Gourのソリューションは、（少なくとも、ChromeとIEで）作業を行い、使用しなくても、元の問題を解決display: table;してdisplay: table-cell;。plunkerを参照してください：http ://plnkr.co/edit/ULEgY1FDCsk8yiRTfOWU

min-height: 100%; height: 1px;外側のdivを設定すると、実際の高さが必要に応じて少なくとも100％になります。また、内部のdivが高さを正しく継承することもできます。

既存の回答に加えて、vh使用するビューポートユニットもあります。以下の簡単なスニペット。calc()もちろん、たとえばmin-height: calc(100vh - 200px);、ページヘッダーとフッターが200px一緒に高さを持っている場合にも、一緒に使用できます。

body {
  margin: 0;
}

.child {
  min-height: 100vh;
  background: pink;
}

<div class="parent">
  <div class="child"></div>
</div>

これはブラウザのバグだとは思いません。すべてが同じように動作します。つまり、明示的な高さの指定をやめると、min-heightは基本的に「最後のステップ」になります。

これは、CSS 2.1仕様が提案する方法とまったく同じように見えます。http： //www.w3.org/TR/CSS2/visudet.html#the-height-property

パーセンテージは、生成されたボックスの包含ブロックの高さに対して計算されます。包含ブロックの高さが明示的に指定されておらず（つまり、コンテンツの高さに依存している）、この要素が絶対的に配置されていない場合、値は「自動」に計算されます。

したがって、min-height親には明示的なheightプロパティセットデフォルトでautoに設定されます。

display: table-cellターゲットオーディエンスのブラウザで可能であれば、、またはflexboxなどの新しいスタイルを使用することで、これを回避するいくつかの方法があります。特定の状況では、絶対配置された内部要素のtopおよびbottomプロパティを使用して、これを指定せずに100％の高さにすることもできます。

ここでdisplay: flex;は推奨されていますが、広くサポートされているため、display: grid;今すぐ使用することを検討してください。デフォルトでは、グリッドの唯一の子がその親を完全に埋めます。

html, body {
  height: 100%;
  margin: 0;
  padding: 0; /* Don't forget Safari */
}

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

#containment-shadow-left {
  background: aqua;
}

グーグルの場合：

このjquery-workaroundは、＃containmentに自動的に高さを取得させ（by、height：auto）、次にピクセル値として割り当てられた実際の高さを取得します。

<script type="text/javascript">
<!--
    $(function () {

        // workaround for webkit-bug http://stackoverflow.com/a/8468131/348841

        var rz = function () {
            $('#containment')
            .css('height', 'auto')
            .css('height', $('#containment').height() + 'px');
        };

        $(window).resize(function () {
            rz();
        });

        rz();

    })
-->
</script>

今日これを実現する最良の方法は、を使用することdisplay: flex;です。ただし、IE11をサポートしようとすると問題が発生する場合があります。flexboxを使用したhttps://caniuse.comによると：

IE 11は、min-heightが使用されている場合、アイテムを垂直方向に正しく配置しません

Internet Explorer互換ソリューション

解決策は、の代わりとしてdisplay: table;、親とdisplay: table-row;子の両方でheight: 100%;使用することですmin-height: 100%;。

ここにリストされているソリューションのほとんどはdisplay: table、table-rowおよび/を使用していますが、とtable-cell同じ動作を複製しませんmin-height: 100%;。

• 親の計算された高さを継承します（その継承ではありません） heightますプロパティ）。
• 親の高さがを超えるようにしmin-heightます。

このソリューションを使用している間、動作は同じでありmin-height、バグを回避するためのプロパティは必要ありません。

説明

それが機能する理由は、ほとんどの要素とは異なり、を使用display: tableしている要素table-rowは常にコンテンツと同じ高さになるためです。これにより、heightプロパティはと同様に動作しmin-heightます。

実行中のソリューション

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

#containment {
  display: table;
  height: 100%;
  background: pink;
  width: 100%;
}

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

#content {
  padding: 15px;
}

#demo {
  display: none;
  background-color: red;
  height: 200px;
}

#demo-checkbox:checked ~ #demo {
  display: block;
}

<div id="containment">
  <div id="containment-shadow-left">
    <div id="content">
      <input id="demo-checkbox" type="checkbox">
      <label for="demo-checkbox">Click here for overflow demo</label>
      <div id="demo">This is taller than #containment</div>
    </div>
  </div>
</div>

別のJSソリューション。これは簡単で、簡単でないCSSのみのソリューションや余分なマークアップ/ハックソリューションを回避するために使用できます。

function minHeight(elm, percent) {
  var windowHeight = isNaN(window.innerHeight) ? 
                     window.clientHeight : window.innerHeight;
  var height = windowHeight * percent / 100;
  elm.style.minHeight = height + 'px';
}

W / jQuery：

function minHeight($elm, percent) {
  var windowHeight = $(window).height();
  var height = windowHeight * percent / 100;
  $elm.css('min-height', height + 'px');
}

角度指令：

myModule.directive('minHeight', ['$window', function($window) {
  return {
    restrict: 'A',
    link: function(scope, elm, attrs) {
      var windowHeight = isNaN($window.innerHeight) ? 
               $window.clientHeight : $window.innerHeight;
      var height = windowHeight * attrs.minHeight / 100;
      elm.css('min-height', height + 'px');
    }
  };
}]);

このように使用するには：

<div>
  <!-- height auto here -->
  <div min-height="100">
    <!-- This guy is at least 100% of window height but grows if needed -->
  </div>
</div>

これは通常私にとってはうまくいきます：

.parent {
  min-height: 100px;
  background-color: green;
  display: flex;
}
.child {
  height: inherit;
  width: 100%;
  background-color: red;
}

<!DOCTYPE html>
<html>
  <body>
    <div class="parent">
      <div class="child">
      </div>
    </div>
  </body>
</html>

 Run code snippetHide results
Expand snippet

この主題を完全に保つために、固定位置を使用してここでは探索されていない解決策を見つけました。

オーバーフローなし

html, body, .wrapper, .parent, .child {
  position: fixed;
  top: 0; 
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0;
  padding: 0;
  height: 100%;
}

.child {
  overflow: auto;
  background: gray;
}

.height-50 {
  height: 50%;
  width: 5em;
  margin: 10px auto;
  background: cyan;
}

<div class="wrapper">
  <div class="parent">
    <div class="child">
      
      <div class="height-50"></div>
      
    </div>
  </div>
</div>

オーバーフローあり

html, body, .wrapper, .parent, .child {
  position: fixed;
  top: 0; 
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0;
  padding: 0;
  height: 100%;
}

.child {
  overflow: auto;
  background: gray;
}

.height-150 {
  height: 150%;
  width: 5em;
  margin: 10px auto;
  background: cyan;
}

<div class="wrapper">
  <div class="parent">
    <div class="child">
      
      <div class="height-150"></div>
      
    </div>
  </div>
</div>

これは、パーセンテージベースの身長で私にとってうまくいくものであり、親は子供の身長に応じて成長しています。Firefox、Chrome、Safariで正常に動作します。

.parent {
  position: relative;
  min-height: 100%;
}

.child {
  min-height: 100vh;
}

<div class="parent">
    <div class="child"></div>
  </div>

私たちのために試した後！chromeは、表示値をインラインブロックに設定すると、子要素の高さが100％になることを理解しています。ところで、フロートを設定すると、それが発生します。

display:inline-block

更新

これは機能していません。解決策は、親ノードのオフセット高さを取得し、JavaScriptを使用してページのandで使用することです。

<script>
    SomedivElement = document.getElementById('mydiv');
    SomedivElement.style.height = String(nvleft.parentNode.offsetHeight) + 'px';    
</script>