Firefoxでheight:100%がきかない？
ソースは以下のとおりです。
IEでは#container内のDIV要素は全てheight:100%で表示されるのですが、Firefoxでは、高さ：100％がききません。
Firefoxでもページの下まで表示されるようにしたいと思います。
よろしくお願いいたします。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<title>サンプル</title>
<style type="text/css">
<!--
/*全体の設定*/
* {
margin: 0px;
padding: 0px;
font-size: 12px;
font-family:"ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
font-weight: normal;
line-height: 150%;
color: #000;
}
/*ページ全体の設定*/
html,body {
height:100%;
}
body {
background-color: #FFF;
}
/*カラムの設定・IE6のハック*/
#wrapper {
width: 1000px;
float:left;
height: 100%;
min-height:100%;
margin: 0px 0px 0px 0px;
overflow:hidden;
_overflow: show;
background-color:#FF0000;
}
body > #wrapper {
height:auto;
}
/*ヘッダの設定*/
#header {
width: 1000px;
height: 123px;
clear: both;
}
/*メインコンテンツの設定*/
#container {
width: 1000px;
clear: both;
height: 100%;
min-height:100%;
margin: 0px 0px 0px 0px;
overflow:hidden;
_overflow: show;
background-color:#00FF00;
}
/*左カラム外側（2カラム内包）*/
#container_left01 {
width: 732px;
float:left;
height: 100%;
min-height:100%;
margin: 0px 0px 0px 0px;
overflow:hidden;
_overflow: show;
}
/*左カラム（左側）*/
#container_left02 {
width: 268px;
float:left;
height: 100%;
min-height:100%;
margin: 0px 0px 0px 0px;
overflow:hidden;
_overflow: show;
}
/*左カラム（右側）*/
#container_left03 {
width: 463px;
float: right;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #000000;
height: 100%;
min-height: 100%;
margin: 0px 0px 0px 0px;
overflow:hidden;
_overflow: show;
background-color:#FFFF00;
}
/*右カラム*/
#container_right01 {
width: 267px;
float:left;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #000000;
height: 100%;
min-height:100%;
margin: 0px 0px 0px 0px;
overflow:hidden;
_overflow: show;
}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>あああ</h1>
</div>
<div id="container">
<div id="container_left01">
<div id="container_left02">あああ</div>
<div id="container_left03">あああ</div>
</div>
<div id="container_right01">あああ</div>
</div>
</div>
</body>
</html>
補足
これに先だって３つの疑似エリアを横一列に並べるための方法として、以下のスクリプトの作成法を教えてもらいました。 <nobr><span style="width:300px;height:180px;overflow:auto;"> テキスト </span> <span style="width:300px;height:180px;overflow:auto;"> テキスト </span> <span style="width:300px;height:180px;overflow:auto;"> テキスト </span> </nobr> そこで今回spanをdivに改めたところ、３つの疑似エリアがインターネット・エクスプローラーでもFirefoxでもエリア枠が表示され、その外側に溢れ出さないことが確認されましたが、何れのブラウザーでも左側に縦一列に表示されるようになってしまいました。