CSSでブロック要素をheight:100％にページ全体にひろげたい！

ブロック要素のheight100％にし要素をページ全体に広げたいのですが、
下記のコードだと当該ページを開いた時点のウィンドウの高さが取得されてしまいます。

【CSS】
@charset "UTF-8";
*{
	margin:0;
}
html{
	height:100%;
}
body{
	height:100%;
	position:relative;
	font-size:100px
}
.page{
	width:auto;
	height:100%;
	border-width:4px;
	border-color: red;
	border-style: solid;
	display:flex;
	position:absolute;
	top:0;
	left:0;
}


【HTML】
<!DOCTYPE "html">
<html lang="ja">
	<head>
		<meta charset="UTF-8">
		<title>テスト</title>
		<link rel="stylesheet" href="test.css">
	</head>
	<body>
		
		<h1>題名：テスト</h1>
		<div class="page">
			<article>
				<p>本文</p><p>本文</p><p>本文</p><p>本文</p><p>本文</p><p>本文</p><p>本文</p><p>本文</p><p>本文</p>
			</article>
		</div>
	</body>
</html>

※わかりやすくコードは簡略化しており、赤枠のボーダーを表示しております。
親要素（body,html）は全て100％です。
heightは親要素に対してのパーセンテージを指定するものですが、
赤枠を越えて本文が表示されているので、もはや何に対しての100％なのか分からず
事故解決が難しいです。

body,htmlが100％の場合はウィンドウの大きさに対して100％を指定する、というのがCSS３の仕様なのでしょうか。

また上記作成中のページは全体の高さが掲載される画像や文章量によって変わる為、
絶対的な指定（height:1500px等）ではなく相対的に％等で指定し、
内容量が変わっても使いまわせる様にしたい、という意図があります。

そうった事をしたい場合はPHP等で掲載するコンテンツ量を参照し
div{height:1500px};
等のcssコードをHTMLに埋め込ませる等しないと難しいのでしょうか。

質問ばかりですみません。
ご回答いただけますと幸いです。

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

回答1件

htmlの100%はウィンドウの高さであり、それに対しての100%なのでウィンドウと同じ高さになるのは正しい挙動だと思います。もしコンテンツが短い時だけウィンドウの高さまで伸ばしたいなら.pageのheightをmin-heightにすれば良いと思います。

css
1.page{
2	width:auto;
3	/*height:100%;削除*/
4	min-height:100%;/*追加*/
5	border-width:4px;
6	border-color: red;
7	border-style: solid;
8	display:flex;
9	position:absolute;
10	top:0;
11	left:0;
12}