画面の分割を%を使ってやりたい。

現在、Webアプリのための画面作成をしております。
単純に上記のような画面を作り、各場所にはそれぞれログイン者名・メニュー欄や処理内容が表示されるようにしたいと考えております。

とりあえず、左右に分割しようと思い、左幅20%・右幅80%で実行したところ以下のようになってしまいます。

html
1<!DOCTYPE html>
2<html>
3<head>
4	<meta charset="utf-8">
5	<meta http-equiv="X-UA-Compatible" content="IE=edge">
6	<link th:href="@{/css/style.css}" rel="stylesheet" type="text/css">
7</head>
8<body>
9	<div class = "wrapper">
10	<div class = "menu">
11	aaaa
12	</div>
13	<div class = "content">
14	bbbb
15	</div>
16	</div>
17</body>
18</html>

css
1@charset "UTF-8";
2
3html{
4	height:100%;
5}
6
7body{
8	height:100%;
9}
10.wrapper{
11	display:table;
12	width:100%;
13}
14
15.menu{
16	display: table-cell;
17	background-color: blue;
18	width: 20%;
19	height:100%;
20}
21
22.content{
23	display: table-cell;
24	text-align:right;
25	background-color: pink;
26	width: 80%;
27	height:100%;
28}

高さを100%にしたいのですが、うまくいきません。

文字が表示されている所しかcssの影響が及んでいない状態です。

どのように変更すれば、上手く行くでしょうか？

わかりやすいアドバイスをお願い致します。

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

回答1件

ベストアンサー

CSS
1*{
2  padding: 0px;
3  margin: 0px;
4}
5html, body {
6    height: 100%;
7}
8.wrapper{
9    display:table;
10    width:100%;
11    height: 100%;
12}