html5 css3 画面レイアウトにつきまして

【やりたいこと】
スマホ用サイトです。
画面を縦四つに分けて（上から、タイトル→メニュー→画像→フッター）、
画面の縦の割合を％で指定し、フッターは最下部に固定したいです。
（メニューの高さ２０％、フッター１０％、タイトル・画像は出来ればauto指定）

【問題点】
１、上の方に重なってしまい画像が見えなくなっている（タイトルは通常に表示中）

２、メニューの高さが低い（５％くらいに見える）

下記がコードになります。
どうぞよろしくお願い致します。

【html】
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0,user-scalable=no">

<body>
<div id="container">
<div id="contents">
<div id="menu">
</div>
</div> <!--contents-->
<div id="footer">
</div>
</div> <!--container-->
<body>


【css】
body {
position:relative;
height: 100%;
} 

#container {
height: auto;
width: 100%;
}

#contents{
height: 100%;
width: 100%;
bottom: 0;
}

#menu{
position: absolute;
height: 20%;
width: 100%;
}

#footer{
position: fixed;
height: 10%;
bottom: 0;
width: 100%;
}

kei344

2018/06/02 11:40

質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

退会済みユーザー

2018/06/02 12:45

ありがとうございます。編集しました。

yoshinavi

2018/06/03 06:03

表示させたい要素とHTMLのタグが一致していないと思います。どこが「タイトル」なのか？どこに「画像」が入るのか？です。HTMLタグの設定から見直されると良いかと思います。

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

回答1件

ベストアンサー

とりあえず下記CSSを追加すれば「メニューの高さ」は問題なくなると思います。

css
1html {
2	height: 100%;
3}
4
5body {
6	margin: 0;
7	padding: 0;
8}
9```**動くサンプル：**[https://jsfiddle.net/x8rrnudw/](https://jsfiddle.net/x8rrnudw/)
10
11---
12
13画面に対する比率を固定したいなら `vh` `vw` を使うほうが良いです。
14
15【CSS には vw, vh, vmin, vmax という単位がある ｜ Developers.IO】
16[https://dev.classmethod.jp/ria/html5/css-length-viewport/](https://dev.classmethod.jp/ria/html5/css-length-viewport/)
17
18【レスポンシブに便利なCSSのvh/vw/vmin/vmaxの基本と使い方とは - WPJ】
19[https://www.webprofessional.jp/css-viewport-units-quick-start/](https://www.webprofessional.jp/css-viewport-units-quick-start/)