CSSで子要素の高さが親要素に収まる時は高さ100%、超える時は可変にしたい

コンテンツの最低限の高さを100%として、

• 子要素がその高さより大きくなる時は、その大きさに合わせて、大きくなる
• ならない時は子要素は高さが100%になる

ような要素を作りたい時があったんです。

まぁ、今でなら、flex使えばいけるのかな？というような気もしなくも無いんですが、IEの旧バージョン対応がどうしても必要だっていう時は、そうも言ってられません。

色々と試行錯誤して悩んでいたんですが、良い方法が思いつかなく、困った。そんな時は、stackoverflowです。以下に似たような問題に悩んでいる方がいました。

child inside parent with min-height 100% not inheriting height

私も初めは、この質問者と同じ考えで、min-heightを使うのは試してみていたんですが、どうもダメでした。HTMLが以下のようにあったとします。

<div id="parent">
  <div id="child">
    コンテンツ
  </div>
</div>

以下のCSSではうまく行きません。

html, body {
  height: 100%;
}
#parent {
  min-height: 100%;
}
#child {
  height: 100%;
}

そこで、stackoverflowの回答の中に、親にheight:1pxを追加すれば解決とあるので以下のように変更してみました。

html, body {
  height: 100%;
}
#parent {
  min-height: 100%;
  height: 1px; /* 追加! */
}
#child {
  height: 100%;
}

一瞬、うまく行ったかなと思うのですが、子要素が、親の高さよりも大きくなった時に、子の背景が、親のもともとの高さの所で切れてしまいます。そこで以下のようにすると、やりたい事が実現できました。

html, body {
  height: 100%;
}
#parent {
  min-height: 100%;
  height: 1px;
}
#child {
  /* height: 100%; */ /*　消します */
  min-height: 100%; /* 追加！ */
}

子要素のheight: 100%を消して、min-height: 100%を追記しただけ。こんな感じで解決できました。

他には、display:tableを使う方法も紹介されていてこちらでも同じように解決はできます。

html, body {
  height: 100%;
}

#parent {
  display: table;
  height: inherit;
}

#child {
  display: table-cell;
}

まぁ、記述が楽なのでこっちでもいいんですが、display:tableを使いたく無い時もあるっちゃあるので、その時は先の方法で解決するのが良いかなとは思います。