DIV要素の高さ100%で、スクロールバーを表示させたいです
ソースは以下のとおりです。
DIV要素をheight:100%にして画面全体に広げるために、色々CSSで設定していましたところ、Firefoxでしたら縦スクロールバーが表示されるのですが、IE6では縦スクロールバーが表示されません。（左カラムの文字はかなり下まで続いています）
IEでもスクロールバーが表示されるようにしたいと思います。
よろしくお願いいたします。
<!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" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="imagetoolbar" content="no" />
<title>サンプル</title>
<style type="text/css">
<!--
/*全体の設定*/
* {
margin: 0px;
padding: 0px;
font-size: 12px;
font-family:'Georgia', Verdana, Osaka, 'MS P Gothic';
font-weight: normal;
line-height: 150%;
color: #000;
}
/*ページ全体の設定*/
html,body {
height:100%;
}
body {
background-color: #FFF;
}
/*カラムの設定*/
#wrapper {
width: 1001px;
float:left;
height: 100%;
min-height:100%;
margin: 0px 0px 0px 0px;
overflow:hidden;
}
body > #wrapper {
height:auto;
}
/*左カラムの設定*/
#left {
width: 340px;
margin: 0px;
float: left;
height: 100%;
min-height: 100%;
background-color:#FF0000;
padding-bottom: 32768px;
margin-bottom: -32768px;
}
/*右カラムの設定*/
#right {
width: 660px;
margin: 0px;
float: right;
height: 100%;
min-height: 100%;
border-left-width: 1px;
border-left-style: dotted;
border-left-color: #000;
background-color:#00FF00;
padding-bottom: 32768px;
margin-bottom: -32768px;
}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="left">
a<br />
a<br />
a<br />
a<br />
a<br />
a<br />
a<br />
a<br />
a<br />
a<br />
a<br />
a<br />
a<br />
a<br />
a<br />
a<br />
a<br />
a<br />
a<br />
a<br />
a<br />
a<br />
a<br />
a<br />
a<br />
a<br />
a<br />
a<br />
a<br />
a<br />
a<br />
a<br />
a<br />
a<br />
a<br />
a<br />
a<br />
a<br />
a<br />
a<br />
a<br />
a<br />
a<br />
a<br />
a<br />
a<br />
a<br />
a<br />
a<br />
a<br />
a<br />
a<br />
a<br />
a<br />
a<br />
a<br />
a<br />
a<br />
a<br />
a<br />
a<br />
a<br />
a<br />
</div>
<div id="right">
aaaa
</div>
</div>
</body>
</html>
補足
回答ありがとうございます。 宣言ですね。やってみます。 外部CSSは記述は以下です。 body,td,th{ line-height:14pt; } body{ scrollbar-face-color:000000; scrollbar-highlight-color:000000; scrollbar-track-color:#ffffff; scrollbar-shadow-color:000000; scrollbar-3dlight-color:#ffffff; scrollbar-arrow-color:#ffffff; scrollbar-darkshadow-color:#ffffff; margin-top:30px; margin-bottom:20px; margin-left:20px; margin-right:20px; } a:link{ color:#165e83; } a:active { color:999999; } a:visited{ color:#165e83; } a:hover{ color:999999; } a{ text-decoration:none; } p{ font-size:9pt; font-family:'Helvetica,ＭＳ Ｐゴシック, Osaka'; width:400px; margin:-1px 0px; padding:1px 3px; text-align :left; } .p3{ font-size:12px; font-family:Helvetica;MS Pゴシック;Osaka; width:400px; margin:-1px 0px; padding:1px 3px; text-align :center; }