css - マージン上位 100% - 親 Div の高さ

Question

構築する次のレイアウトがあります。

基本的に、親の上からヘッダーの高さを差し引いた 100% の位置にヘッダーの高さが異なる高さの異なる 3 つの div が必要です。jQuery でこれを行うこともできますが、これはレスポンシブ サイトであるため、可能な限り CSS ベースに保ちたいと考えています (そうしないと$(window).resize()、対処する必要があり、私の経験では信頼できない可能性があります)。

おそらくCSS3calc機能を使用して、これは可能ですか？

ありがとう。

Answer 1

私はこの解決策を持っています（それらが収まる限り、任意の数の列で機能します）：

1. インライン ブロックを使用して結果を中央揃えにする
2. 相対的な配置を使用して、ブロックを青いボックスの下部に揃えます (上部の垂直方向の配置が必要です)。
3. 緑色のブロックを絶対位置にすることで、フローの外に移動します (これにより、オレンジ色のボックスがフロー内に残り、青色のボックスの下部に配置されます)。

body {
  font: medium monospace;
}
.blue {
  background: #AAF;
  height: 12em;
  text-align: center;
}
.helper {
  display: inline-block;
  width: 10em;
  vertical-align: top;
  position: relative;
  top: 100%;
}
.green {
  background: #CFC;
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
}
.orange {
  background: #FCA;
}

<div class="blue">
  <div class="helper">
    <div class="green">
      1<br/>2
    </div>
    <div class="orange">
      1<br/>2<br/>3
    </div>
  </div>
  <div class="helper">
    <div class="green">
      1<br/>2<br/>3
    </div>
    <div class="orange">
      1<br/>2<br/>3<br/>4<br/>5
    </div>
  </div>
  <div class="helper">
    <div class="green">
      1
    </div>
    <div class="orange">
      1<br/>2<br/>3<br/>4
    </div>
  </div>
</div>

Answer 2

次の CSS ルールを試してください。height: calc(100% - header_height);