テーブルレイアウトで２カラムにした場合、横並びに２つの大きなセルのテーブルを作って、
その中に小さなテーブルを入れるというレイアウトをすることがあります。
このとき高さの下揃えをしようとしてheight="100%"にしてもできないことってないですか？
[関連項目] スタイルシートのfloatでheight:100%;
[ソース]
|
|
heightを指定していないと、heightは自動（内包要素の高さに合わせる）になります。
中のテーブルをheight="100%"にしても、外のテーブルがheight自動なら、中のテーブルも100%ではなく『自動』とみなされます。
そこでheight="100%"にして、テーブルの下を揃えたいなら外のテーブルのheightを指定する必要があります。
下の例では、外枠にheight="120"を指定するとできるようになります。
[ソース]
|
|
テーブルをウィンドウいっぱいにしたいときに、height="100%"にしてできない場合も同じです。
<body>直下にテーブルを書いているのですから、height="100%"はbody要素によります。
body要素にheightの指定をしてなくてもできる場合とできない場合があります。
この違いは何でしょう？
DOCTYPE宣言で『互換モード』を指定するとbodyのheightは100%とみなされます。
『標準準拠モード』だとbodyは自動です。
bodyをheight="100%"にしたらできると思うのは間違いで、その親要素によりますので親要素htmlの高さもheight="100%"にしないとできません。
DOCTYPE宣言について
スタイルシートで下記のようにするとできるようになります。
html,body{
height: 100%;
}
height: 100%;
}
[サンプルソース]
注意
他のwidthやheightを指定したときの、width="100%"とかheight="100%"は『残りの領域の100%』ではないです。
あくまでも親要素を基準とした幅や高さの何パーセントということです。
200ピクセルの親要素に70ピクセルの子要素があって、それとは別の子要素に100%を指定したとします。
このときの100%は200-70=130ピクセルの100%ではなく、200ピクセルの100%つまり200ピクセルになります。
このとき親要素は270ピクセルに拡大されます。
△上に戻る
<table border="1">
<tr>
<td valign="top">
<table border="1" height="100%" bgcolor="#cc9999">
<tr>
<td>左のテーブル</td>
</tr><tr>
<td>文章は短め</td>
</tr>
</table>
</td>
<td valign="top">
<table border="1" height="100%" bgcolor="#9999cc">
<tr>
<td>右のテーブル</td>
</tr><tr>
<td>文章は長め<br />サンプルの文章って<br />大変ですよ</td>
</tr>
</table>
</td>
</tr>
</table>
<tr>
<td valign="top">
<table border="1" height="100%" bgcolor="#cc9999">
<tr>
<td>左のテーブル</td>
</tr><tr>
<td>文章は短め</td>
</tr>
</table>
</td>
<td valign="top">
<table border="1" height="100%" bgcolor="#9999cc">
<tr>
<td>右のテーブル</td>
</tr><tr>
<td>文章は長め<br />サンプルの文章って<br />大変ですよ</td>
</tr>
</table>
</td>
</tr>
</table>
△上に戻る
親テーブルをheight="120"
<table border="1" height="120">
<tr>
<td valign="top">
<table border="1" height="100%" bgcolor="#cc9999">
<tr>
<td>左のテーブル</td>
</tr><tr>
<td>文章は短め</td>
</tr>
</table>
</td>
<td valign="top">
<table border="1" height="100%" bgcolor="#9999cc">
<tr>
<td>右のテーブル</td>
</tr><tr>
<td>文章は長め<br />サンプルの文章って<br />大変ですよ</td>
</tr>
</table>
</td>
</tr>
</table>
<tr>
<td valign="top">
<table border="1" height="100%" bgcolor="#cc9999">
<tr>
<td>左のテーブル</td>
</tr><tr>
<td>文章は短め</td>
</tr>
</table>
</td>
<td valign="top">
<table border="1" height="100%" bgcolor="#9999cc">
<tr>
<td>右のテーブル</td>
</tr><tr>
<td>文章は長め<br />サンプルの文章って<br />大変ですよ</td>
</tr>
</table>
</td>
</tr>
</table>
△上に戻る
height="100%"の正しい方法サンプル
<html>
<head>
<meta http-equiv="content-style-type" content="text/css">
<style type="text/css">
<!--
html,body{
height: 100%;
}
-->
</style>
</head>
<body>
<table border="1" height="100%" bgcolor="#cc9999">
<tr>
<td>テーブル</td>
</tr>
</table>
</body>
</html>
<head>
<meta http-equiv="content-style-type" content="text/css">
<style type="text/css">
<!--
html,body{
height: 100%;
}
-->
</style>
</head>
<body>
<table border="1" height="100%" bgcolor="#cc9999">
<tr>
<td>テーブル</td>
</tr>
</table>
</body>
</html>
