互換モード
<style type="text/css"><!--
.eg1 {height:50px; border:8px solid #9cf; background:#eee; padding:7px;}
--></style>
<div class="eg1">.eg1</div>
標準モード
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<style type="text/css"><!--
.eg1 {height:50px; border:8px solid #9cf; background:#eee; padding:7px;}
--></style>
<div class="eg1">.eg1</div>
互換モード
<style type="text/css"><!--
.eg1 {height:50%; border:8px solid #9cf; background:#eee; padding:7px;}
--></style>
<div class="eg1">.eg1</div>
標準モード
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<style type="text/css"><!--
html {height:100%;}
body {height:100%;}
.eg1 {height:50%; border:8px solid #9cf; background:#eee; padding:7px;}
--></style>
<div class="eg1">.eg1</div>
*1 ie8 ff3 o9 sf4 gc2の各ブラウザの標準モードにおいて、「heightプロパティ」の%値は、そのままでは包含ブロックの高さを参照できず(この場合、iframeの高さ)、明示的な参照値として「html要素」と「body要素」の「heightプロパティ」の%値が同時に指定されていなければ、参照することが出来ません。%値は参照できる値がない場合autoとして扱われます。
互換モード
<style type="text/css"><!--
.eg1 {height:auto; border:8px solid #9cf; background:#eee; padding:7px;}
--></style>
<div class="eg1">.eg1</div>
標準モード
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<style type="text/css"><!--
.eg1 {height:auto; border:8px solid #9cf; background:#eee; padding:7px;}
--></style>
<div class="eg1">.eg1</div>