縦に要素を並べるレイアウトの高さについて

--------------------------------------------
要素A
--------------------------------------------
要素B
--------------------------------------------


要素C（要素Bから要素Dまでのぴったりの高さにしたい）


--------------------------------------------
要素D（フッター）
--------------------------------------------

スマホでこんな感じのレイアウト作りたいのですが
要素A、Bは上から並べるだけ。要素Dは位置固定にすれば良いと思うのですが、要素Cの高さをぴったりにする方法がわかりません。上は要素Bの下、下は要素Dの上みたいな指定の方法ってあるのでしょうか？

yoshinavi

2018/06/29 01:38

より良い回答を得るためには、ご自分で考えたコードをご提示ください。このままではteratailでの「推奨していない質問（コードをください・デバッグしてください等の丸投げの質問）」に該当すると思います。 https://teratail.com/help/avoid-asking

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

回答1件

ベストアンサー

「ヘッダーとフッター部分が固定のheightのとき、コンテンツ部分がヘッダー、フッター部の高さに合わせて伸び縮みして欲しい」ということだと読みました。
質問者さんが実現したいことは、以下のように行えると思いますが、いかがでしょうか？

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6    <style>
7        * {
8            box-sizing: border-box;
9            margin: 0;
10            padding: 0;
11        }
12
13        .box {
14            display: flex;
15            flex-direction: column;
16            width: 100%;
17            height: 100vh;
18        }
19
20        .item {
21            border-bottom: 1px solid #202326;
22            background: #66f;
23            flex: 1;
24        }
25
26        .header, .footer {
27            flex: none;
28        }
29
30        .header {
31            background: #6f6;
32            flex-basis: 50px;
33        }
34
35        .footer {
36            background: #f66;
37            flex-basis: 100px;
38        }
39    </style>
40</head>
41<body>
42<div class="box">
43    <div class="item header"></div>
44    <div class="item"></div>
45    <div class="item footer"></div>
46</div>
47</body>
48</html>