電子書籍の厳選無料作品が豊富！

div入れ子による height100%

解決済

  • 質問者：moon333
  • 質問日時：
  • 回答数：8件

お世話になります。

親要素のdivは縦100%になるのですが、
入れ子のdivが縦100%にならず困っております。

検証ブラウザは、IE6、IE7、FF2、Safariです。

お分かりの方、ご教授をお願いいたします。

▼HTML
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<title>test</title>
<style type="text/css">
<!--
html { height:100%; }
body { height:100%; margin:0; padding:0; }

#wrapper {
background: #99CC00;
width:500px;
margin-left:auto;
margin-right:auto;
min-height:100%;
}
#wrapper-inner {
background:#CCFF00;
width:450px;
margin-left:auto;
margin-right:auto;
min-height:100%;
}
#contents {
background: #FFFFCC;
width:400px;
margin-left:auto;
margin-right:auto;
min-height:100%;
}

* html #wrapper { height: 100%; }
* html #wrapper-left { height: 100%; }
* html #wrapperA { height: 100%; }

-->
</style>
</head>
<body>

<div id="wrapper">
<div id="wrapper-inner">
<div id="contents">
テスト
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</div>
</div>
</div>

</body>
</html>

通報する

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

質問の本文を隠す

A 回答 (8件)

No.8ベストアンサー

  • 回答者： opacityx
  • 回答日時：

こんにちは。



勘違いだったらすみません。もしもdivを3重にしているのが背景のためなら多分下のでいけると思います。


<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift-JIS" />
<title>test</title>
<style type="text/css">
<!--
html {
height:100%;
}

body {
height:100%;
margin:0;
padding:0;
text-align:center;
background:url(イメージ名.jpg) center repeat-y;
}

#contents {
width:400px;
margin-left:auto;
margin-right:auto;
text-align:left;
}
-->
</style>
</head>
<body>
<div id="contents">
テスト
<br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br />
テスト
</div>
</body>
</html>

これで横500px、縦1pxとかで画像を用意して、ソースのイメージ名のところをその画像名にしてやればいけるとおもいます。
(上だと拡張子がjpgになってます)
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご回答ありがとうござます。

bodyに背景画像の場合、下記アドレスの様な1pxのずれが生じるため、
div入れ子の中央寄せ、縦100%を試行錯誤しております。

http://okwave.jp/qa2832295.html

通報する
お礼日時：2007/06/14 10:32

No.7

  • 回答者： leap_day
  • 回答日時：

こんにちは　No.6です



＞レイアウトの中央配置という訳ではないのです。
こちらこそ語弊を生むような回答をしてしまって申し訳ないｍ（－－）ｍ

text-alignとoverflowは気になったので付け加えただけですので・・・
メインは背景色100％の方です（－－；）

とりあえずOperaでスクロールの出た状態からスクロールのなくなる高さまで拡げたらスクロールバーが残ってしまうという問題点は残ってますがIE6,Firefox,Operaでは背景色100％できてますけど、そちらではどうですかね？
    • good
    • 0
    • 件
通報する
この回答へのお礼

　
度々のご回答をありがとうございます。

下でも書かせて頂いたのですが、
ブラウザの縦100%の表示自体は問題ないのですが、
コンテンツが多く画面を下へスクロールした場合、
背景が途切れてしまう問題がでてしまうのです。
（この症状はIE7、FF2、Safariです。Opera未確認）

▼スクロール前
http://www.geocities.jp/ajax3210/01.gif
▼スクロール後
http://www.geocities.jp/ajax3210/02.gif

ちなみに、コンテンツ部の最下部が分かりやすいように
最下部に「テスト」の文字を入れました。

▼HTML
<body>
<div id="wrapper">
<div id="wrapper-inner">
<div id="contents">
テスト
<br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br />
テスト
</div>
</div>
</div>
</body>

※みなさんの回答で、表示的に縦100%がクリアしていますので、
この問題は新しくトピックスをたてなおした方がいいかもしれませんね。。。

通報する
お礼日時：2007/06/05 10:28

No.6

  • 回答者： leap_day
  • 回答日時：

こんにちは



IE6,Firefox2,Operaしか持っていないのでIE7,Safariでは未確認ですが・・・
こういうことですか？
IE6では左に配置されたままだったのでbodyにtext-align:centerつけて
contentsにtext-align:leftつけてます
あと縦スクロールつけるそうなのでcontentsにoverflow:autoをつけてます
Operaでは高さの狭いところから拡げるとちょっと縦スクロールが出たままになりますけど・・・

<style type="text/css">
<!--
html { height:100%; }
body { height:100%; margin:0; padding:0; text-align:center;}

#wrapper {
background: #99CC00;
width:500px;
margin-left:auto;
margin-right:auto;
min-height:100%;
height: 100%;
}
#wrapper-inner {
background:#CCFF00;
width:450px;
margin-left:auto;
margin-right:auto;
min-height:100%;
height: 100%;
}
#contents {
background: #FFFFCC;
width:400px;
margin-left:auto;
margin-right:auto;
min-height:100%;
text-align:left;
height: 100%;
overflow:auto;
}
-->
</style>
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご回答ありがとうございます。

>こういうことですか？
>IE6では左に配置されたままだったのでbodyにtext-align:centerつけて
>contentsにtext-align:leftつけてます

いえ、#wrapperの縦100%の背景色はうまく表示されているのですが、
その中にある#wrapper-innerや#contentsが、縦100%の背景色が出ない（途中で途切れている）という事です。

なので、レイアウトの中央配置という訳ではないのです。
質問内容が言葉足らずですみません。。

引き続き、ご回答をお待ちしております。

通報する
お礼日時：2007/06/04 10:31

No.5

  • 回答者： steel_gray
  • 回答日時：

#2のお礼にあった問題点を勘違いしていました。


全然解決してませんでしたね。失礼しました。
この問題の解決策はわからないです。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご回答ありがとうございます。

まだ未解決なので、引き続き回答をお待ちしております。
よろしくお願いいたします。

通報する
お礼日時：2007/05/31 16:39

No.4

  • 回答者： steel_gray
  • 回答日時：

#wrapperA だけでなく


#wrapper-left も　#wrapper-inner に修正してます。念のため。
    • good
    • 0
    • 件
通報する
この回答へのお礼

度々のご回答をありがとうございます。

こちらの記述ミスでお手数をおかけしております。

ご指摘のCSSを修正しても同じ症状ですね。困りました。。。

ちなみに、ご指摘の「* html 」はスターハックというCSSハックを利用しています。
min-heightはFirefoxなどのモダンなブラウザには対応していますが、
IEが未対応な為、スターハックでheightを行いました。

通報する
お礼日時：2007/05/31 16:07

No.3

  • 回答者： steel_gray
  • 回答日時：

* html #wrapper { height: 100%; }


* html #wrapper-left { height: 100%; }
* html #wrapperA { height: 100%; }
これを
#wrapper { height: 100%; }
#wrapper-inner { height: 100%; }
#contents { height: 100%; }
このように修正すると大丈夫だと思います。
(SafariはMacないんで確認してませんが)

html要素は最上位ですから * html という書き方は間違いです。(なんかのcssハックでしたっけ？？)
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご回答ありがとうございます。

上のご回答に合わせてコメントさせて頂きますね。

通報する
お礼日時：2007/05/31 16:09

No.2

  • 回答者： steel_gray
  • 回答日時：

まず、#contentsの内容の高さが計算されます。


heightはautoですのでmin-heightを処理しますが、%指定されていますので
包含ブロック(#wrapper-inner)のheightを参照しますが
#wrapper-innerには「heightが明示されていない※」ので、
#contentsのmin-heightはautoとして扱われ、内容にあわせた高さになります。
同様に#wrapper-innerの高さもautoに。
#wrapperの高さを計算する段になって、初めて包含ブロック(body)の高さが明示されているので、100%になります。

※
http://www.y-adagio.com/public/standards/tr_css2 …
パーセントは生成されるボックスの包含ブロックの高さに関して計算される。包含ブロックの高さが明示的に指定されない場合，すなわち，内容の高さに依存する場合は，パーセント値は'auto'と同様に解釈される。


とりあえず全部height:100%にしてはだめなんですか？？
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご回答ありがとうございます。

#wrapper、#wrapper-inner、#contentsに
height:100%を追加した所、うまく表示はされるのですが一点問題がありました。
▼問題点
ブラウザの高さを縮め縦スクロールバーが出る状態にし（コンテンツが長い場合を想定）、下へスクロールすると背景色が途切れてしまいます。
IE7、FF2、Safariでこの現象がおこります。

どうにか解決したいと思いますので、
どうぞよろしくお願いいたします。

※「* html #wrapperA」は、「* html #contents」でしたね。

通報する
お礼日時：2007/05/31 14:19

No.1

margin-top margin-bottom padding-top padding-bottom


をそれぞれ(0とかに)指定しておくとどうなる？
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご回答ありがとうございます。

margin:0; padding:0; をそれぞれに入れても変化なしですね。

SAYKAさまの方ではうまく表示されましたでしょうか？

通報する
お礼日時：2007/05/31 13:20

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

Q質問する（無料）

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

Q質問する（無料）

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

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

おすすめ情報