CSSの子要素のheight指定の方法を教えてください。

Question

【質問したいこと】
contentのclassのheight指定方法について。
headerとfooterのclassの高さが固定値であって、contentのclassの高さをparentの残っている要素の高さいっぱいまで指定するCSSの設定方法。
条件によって、動的にfooterのclassは消えたりします。(display:noneします。) その際もcontentのclassの高さがcssの設定だけで動的変更される設定方法が知りたいです。

宜しくお願いします。

<div class="parent">
  <div class="header">A</div>
  <div class="content">B</div>
  <div class="footer">C</div>
</div>

<style>
 .parent {
   height:100%;
 }
 .header {
   height:12px;
 }
 .content {
   height:?
 }
 .footer {
   height:16px;
 }
</style>

Answer 1

gridを使ってみました。

.parent {
  height: 100vh;
  display: grid;
  grid-template-rows: 12px 1fr auto;
}

.footer {
  height:16px;
/*  display: none; */
}

---

条件によって、動的にfooterのclassは消えたりします。(display:noneします。)

この条件を見落としてましたので、下記は取り消します。

calcで計算すればいいでしょう。

 .parent {
   height:100vh;
 }
 .header {
   height:12px;
 }
 .content {
   height:calc(100vh - 28px);
 }
 .footer {
   height:16px;
 }

Answer 2

flexを使っていけばさっくりいけます。

.parent {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.header,
.footer { flex-shrink: 0;}
.header {
  height:12px;
}
.content {
  flex: 1;
}
.footer {
  height:16px;
}