ソースは以下のとおりです。
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:"MS Pゴシック", 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
- 回答日時:
No.2です。
No.2でのサンプルでIE6の挙動に不具合がありましたので、一部修正させて頂きます。
/*ラッパー*/
#wrapper {
(省略)
margin: 0 0 -123px 0;
_margin-bottom: 0;←追加
(省略)
}
IE6ではこのハックを追加する事で”コンテンツ量がウィンドウサイズの高さに満たない”場合は丁度123px分の余分なスクロールが発生してしまうのですが、-123pxのままだと”コンテンツ量がウィンドウサイズの高さを超えた”場合に下部123px分が表示されませんでしたので…
No.2
- 回答日時:
多分これは以前回答させて頂いた【質問番号: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: "MS Pゴシック", 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の下マージンをマイナスにして相殺する。
といった修正で済みます。
不具合ありましたら具体的に補足して下さい。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- JavaScript ソースコードのいじる場所が分かりません。 1 2022/12/23 02:06
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- HTML・CSS 吹き出し 下記の吹き出しのスタイルシートについて 下記のスタイルシートは左側にアイコンがでる使用にな 1 2022/11/12 17:55
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
- HTML・CSS cssが効かなくて困ってます 1 2023/01/01 23:57
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS (Javascript)印刷するファイルに応じて印刷プレビュー画面で用紙を自動的に切り替えたい!! 2 2022/04/11 12:04
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
CSSでボックスのheightが0になる
-
画像イメージの上下左右、欲し...
-
ウインドウを小さくするとbody...
-
定義リストに下線をつけたいと...
-
テーブルのセル間に余白が空い...
-
table周辺の隙間をなくしたい。
-
WEBサイト作成:初心者です...
-
4枚の画像を均等間隔で一列に...
-
Firefoxでネガティブマージンが...
-
メディアクエリで文字サイズを...
-
CSS検証サービス
-
スタイルシートで<div>を使った...
-
CSS:animation開始位置の設定
-
form input テキストを上下中央...
-
【HTML&CSS】フッター下部の余...
-
HTMLでCSSでボーダーが表示され...
-
CSSでborderの指定を解除する記...
-
CSSで微妙にずれる
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
画像イメージの上下左右、欲し...
-
CSS、width100%でもできる余白
-
CSSがなぜかfont-sizeだけ効か...
-
css初心者 フレックスボックス...
-
余分な縦スクロールバーが出て...
-
CSS:animation開始位置の設定
-
form input テキストを上下中央...
-
W3Cのソースコードの検証サービ...
-
スクロールボックスを中央に配...
-
CSSでボックスのheightが0になる
-
表示倍率を変えるとレイアウト...
-
【CSS】ヘッダーの高さが不明の...
-
Media Queries 4 で 非推奨とな...
-
div領域をウインドウサイズに合...
-
CSS(0の単位)について
-
divで囲まれたpaddingの指定を...
-
中点「・」の改行について
-
CSSで指定した背景画像にリンク...
おすすめ情報