cssでdivタグの高さの指定が効かない

やりたいこと

htmlとcssで以下のようなレイアウトのwebページを作りたいと考えています。

わからないこと

わからないことが２つあります。

❶ pタグに文字を入れずに空白をつける方法

該当部分のhtmlとcssは以下のように定義しています。

現状<p>タグに何かしらの文字列（空白以外）を入れておくとオレンジ色の枠ができるのですが、pタグを削除したり空にするとオレンジ色がなくなってしまいます。

html
1	<div class="empty">
2	<p>a</p>
3	</div>

css
1.empty {
2height:50%;
3background: orange;
4}

####❷ 高さの%指定が適応されていない
cssで空白部分などにheightを%で指定しているのですが適応されていないようでオレンジの背景の大きさが変わらない状態です。widthの%指定は正常に動作しました。

#####コード全文

<!doctype html>
<head>
	<link rel="stylesheet" type="text/css" href="test.css"></head>
	<meta charset="UTF-8">
	<title>inouefood</title>
<html>
<body>
	<div class="empty">
	<p>a</p>
	</div>
	<div class="description">
 		<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
 	</div>
 	<div class="application">
	 	<div class="app1">
	 		<img src="img/icon1.png" width=200 height=200>
	  	</div>
	 	<div class="app2">
	 		<img src="img/icon2.png" width=200 height=200>
	 	</div>
 	</div>
</body>
</html>

css
1body {
2  /* 画像ファイルの指定 */
3  background-image: url(img/background.png);
4  /* 表示するコンテナの大きさに基づいて、背景画像を調整 */
5  background-size: cover;
6  height: 100%;
7}
8p {
9color: #ffffff;
10font-size: 150%;
11text-align:center;
12}
13
14.empty {
15height:30%;
16width:50%;
17background: orange;
18}
19
20.description {
21height:30%;
22}
23
24.application {
25content: "";
26display: block;
27clear: both;
28}
29.app1 {
30float: left;
31width:50%;
32text-align:right;
33}
34.app2 {
35float: left;
36width:50%;
37text-align:left;
38}

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

回答1件

ベストアンサー

<percentage>

包含ブロックの高さのパーセントで高さを定義します。

height - CSS: カスケーディングスタイルシート | MDN

包含ブロックとはひとことで言うと親要素のことです。そして親要素のheightがautoの場合はautoとして扱われます。
なので、❶❷の現象は同じ原因です。
.emptyの親要素であるbodyのheightは100%になっていますが、その親要素のhtmlはautoですから、auto扱いとなり、.emptyもauto扱いになります。