プロが教える店舗&オフィスのセキュリティ対策術

ソースは以下のとおりです。
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-transitio …
<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>

A 回答 (1件)

手っ取り早い方法としては、現状ではIE6だけoverflowの解釈が違ってしまっているので、ハック等で振り分ければとりあえず現状での不具合は解消されます。



#wrapper {
(省略)
overflow: hidden;
_overflow: show;←※IE6以下用ハック
}

など。
    • good
    • 0
この回答へのお礼

早速のご回答ありがとうございます。
試してみましたところ、問題が解消されました。

overflowの解釈の違い等不勉強でした。

ありがとうございました。

お礼日時:2009/07/07 17:35

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!