HTMLとCSSにて、「要素」と「要素」の間の「div要素」の高さを常にぴったり当てはめたい

HTMLにてwebページを作成中です。
その際に要素と要素の間にdiv要素を入れ込み、そのdiv要素の間の高さを常にぴったりとハマる様に設定したいと思っているのですが、調べても中々分からなかったので質問させていただきました。

状況の説明が下手なので図を書かせていただきました。

こちらはタブレットでwebページを表示した時の様子です。
赤色で塗っている要素の高さを常にぴったり間に収めたいです。

メディアクエリを利用してレスポンシブデザインにしているので、デスクトップやスマートフォンで表示した際、この赤色の部分の高さは変わってしまいます。

デスクトップ

スマホ

この赤い部分を自動的にぴったりとハマる様にするにはどうすれば良いでしょうか。
ご回答よろしくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

「コンテンツが少ないときでも，フッターが最下部に付くようにしたい」ということでしょうか？
でしたら，これでどうでしょう

html
1<header>HEADER</header>
2<main>
3  <div id="main">
4    <h1>こう？</h1>
5    <p>どうでしょう？</p>
6  </div>
7</main>
8<footer>FOOTER</footer>

css
1*{
2  box-sizing: border-box;
3  padding: 0;
4  margin: 0;
5}
6body{
7  min-height: 100vh;
8}
9header{
10  height: 60px;
11  background: skyblue;
12}
13footer{
14  height: 50px;
15  background: palegreen;
16}
17main{
18  min-height: calc(100vh - 110px); /*ビューポートの高さ100%からヘッダとフッタの高さを引く*/
19}
20#main{
21  background: wheat;
22  margin: 10px auto; /*中央寄せ*/
23  width: 90%;
24  max-width: 900px;
25}