heightの値別のレンダリング

 
ビジュアル詳細
ホーム > CSS2 Note > height > heightの値別のレンダリング

長さ

互換モード
<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として扱われます。
 

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>
 
関連項目: height
トップページ CSS2 Note ページトップ
 2009/09/01発行 2009/09/01更新