重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

【GOLF me！】初月無料お試し

Firefoxでheight:100%がきかない？

締切済

  • 質問者：sdfxjp
  • 質問日時：
  • 回答数：3件

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

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (3件)

No.3

  • 回答者： abril
  • 回答日時：

No.2です。


No.2でのサンプルでIE6の挙動に不具合がありましたので、一部修正させて頂きます。

/*ラッパー*/
#wrapper {
（省略）
margin: 0 0 -123px 0;
_margin-bottom: 0;←追加
（省略）
}

IE6ではこのハックを追加する事で”コンテンツ量がウィンドウサイズの高さに満たない”場合は丁度123px分の余分なスクロールが発生してしまうのですが、-123pxのままだと”コンテンツ量がウィンドウサイズの高さを超えた”場合に下部123px分が表示されませんでしたので…
    • good
    • 0
    • 件
通報する
この回答へのお礼

いつもありがとうございます。
IE6以下用ハックですね。ブラウザ毎の表示の差異は本当にどうにかしてほしいものです…。

通報する
お礼日時：2009/07/30 21:52

No.2

  • 回答者： abril
  • 回答日時：

多分これは以前回答させて頂いた【質問番号：5105806】の発展系だと思うのですが。


先のコンテンツはヘッダーなしの左右2カラム構成でしたから、その考え方を今回のヘッダー＋3カラム構成にカスタイマイズしたのだと思いますが、高さ関係の処理が適切ではありません。
＃heightは勿論、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;
line-height: 150%;
color: #000;
font-size: 12px;
font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
font-weight: normal;
}
/*ページ全体*/
html, body {
height: 100%;
}
body {
background: #fff;
}
/*ラッパー*/
#wrapper {
float: left;
width: 1001px;
height: 100%;
min-height: 100%;
margin: 0 0 -123px 0;
background: #f00;
overflow: hidden;
_overflow: show;
}
body > #wrapper {
height: auto;
}
/*ヘッダ*/
#header {
width: 1000px;
height: 123px;
}
/*左カラム*/
#left {
float: left;
width: 268px;
height: 100%;
min-height: 100%;
margin: 0 0 -32768px 0;
padding-bottom: 32768px;
background: #0f0;
}
/*中央カラム*/
#center {
float: left;
width: 464px;
height: 100%;
min-height: 100%;
margin: 0 0 -32768px 0;
padding-bottom: 32768px;
border-left: 1px solid #000;
background: #ff0;
}
/*右カラム*/
#right {
float: right;
width: 267px;
height: 100%;
min-height: 100%;
margin: 0 0 -32768px 0;
padding-bottom: 32768px;
border-left: 1px dotted #000;
background: #0f0;
}
-->
</style>
</head>

<body>
<div id="wrapper">
<div id="header">
<h1>ヘッダー</h1>
</div>

<div id="left">
<p>左カラム最初</p>
（この間のテキストを適当に増減してスクロールやカラムの挙動を確認して下さい）
<p>左カラム最後</p>
</div>

<div id="center">
<p>中央カラム最初</p>
（同上）
<p>中央カラム最後</p>
</div>

<div id="right">
<p>右カラム最初</p>
（同上）
<p>右カラム最後</p>
</div>
</div>
</body>
</html>
----------------------------------------------------------------------
「以前のものを応用するなら」ですが：

・wrapperの中に更にcontainerを設ける必要はない
・3コラムにするのに左と中央カラムだけを内包する親要素を更に作る必要はない。
wrapperの直下にleft、center、rightのカラムのを同条件で作り、それぞれfloatをleft・left・rightにすればいい。
・headerの高さ123px分をwrapperの下マージンをマイナスにして相殺する。

といった修正で済みます。

不具合ありましたら具体的に補足して下さい。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます。御礼が遅くなり誠に申し訳ございません。
ご指導の通りでうまくいきました。

通報する
お礼日時：2009/07/30 21:47

No.1

  • 回答者： Wingard
  • 回答日時：

heightはIEでしか使えなかったと思います。


なので根本的に変えるしかありません。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご回答ありがとうございます。
この方法でも、うまくできる方法がありましたので、ご参照ください。

通報する
お礼日時：2009/07/30 21:48

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

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報