html - 残りの高さを取得するために兄弟 div を作成しますか?

Question

私は3つのdivを持っています:

 <div class="a">

    <div class="b">
    </div>
    <div class="c">
    </div>

  </div>

現在の CSS :

.a
{
  height:300px;
  border:solid 2px red;
}

.b
{
  height:100px;
  border:solid 3px blue;
}
.c
{
  height:100%;
  border:dashed 3px gray;
}

ここに画像の説明を入力

赤の高さはJS を介して決定されます (ドキュメントの準備ができたとき)。(これはポップアップウィンドウの div であり、その高さはユーザーの画面サイズに比例する必要があります。)

のblue 高さは固定です。（題名）

灰色のdiv の高さを使用可能な残りの高さ (赤いものから)にするcssの方法はありますか?

したがって、次のようになります。

ここに画像の説明を入力

注:

ブラウザのサポート: IE 8+

score 2 · Accepted Answer

なぜ最初の 1 時間以内にユーザーが回答を受け入れるのか、いつも疑問に思っています...!?

絶対配置は確かに 1 つのオプションですが、多くの場合、要素が通常の流れにないという欠点があります。

あなたの場合、別のオプションがあります: display: table(-xyz);

外側のコンテナ/ラッパー要素の幅と高さのみを設定する必要があります - 以下を参照してください:

...

score 2 · Accepted Answer

.a
{
  position: relative;
}

.b
{
  height:100px;
}
.c
{
  position: absolute;
  top: 100px;
  left: 0;
  right: 0;
  bottom: 0;
}

2 に答える 2