CSSテクニックコミュのdivの高さを100%に

サイドバーなどのdivの高さを100%にして

常にコンテンツに合わせた長さで背景を表示させたい時、

その親要素及び、body,htmlにheight100%指定をすれば良いとの事なのですが

スクロールすると途切れてしまいます。

これは、仕様が無いことなのでしょうか？

私の設定に誤りがあるのでしょうか？

お分かりになる方、宜しくお願い致します。

html-------------------------------------------

<body>

<div id="page">
<div id="sidebar">
</div>
<div id="container">
</div>
</div>

</body>

css-------------------------------------------

@charset "utf-8";

*{
margin:0;
padding:0;
}

html,body {
height: 100%;
}

body{
background-color:#333333;
}

div#page{
width:700px;
margin:0 auto;
height: 100%;
}

div#sidebar{
width:100px;
float:left;
height: 100%;
background-color:#0099cc;
}

div#container{
width:590px;
float:right;
margin-left:10px;
background-color: #ffffff;
height: 3000px;
}

コメント(12)

最初
全て
最新の40件

[1] mixiユーザー 09月16日 17:57

height: 100%; は、皆さん悩ましく思っている部分ですねぇ。

<div id="page">
<div id="sidebar"> </div>
<div id="container"> </div>
</div>

というソースに対してなら、「sidebar」に設定したい背景を「page」に設定することで、
結果、height:100%「のように見える」手法が一般的ではないかと思います。

[2] mixiユーザー 09月16日 18:01

>さいとう様

高速なレス、ありがとうございます！

やっぱり書いたCSSでは永遠にスクロールに対応する100%にはならないのですね。。

[4] mixiユーザー 09月16日 19:27

>Reekさん

わぁっ！
強引且つ素敵なワザですねっ

ものすごく参考になります！ありがとうございました

[5] mixiユーザー 09月16日 19:41

http://www.stylish-style.com/csstec/ultimate/height100.html

すでにチェックしてるかもしれませんがこちらも

[6] mixiユーザー 09月16日 20:01

>P-o-N-Yさん

ありがとうございますっ

でもこれは私の記述した方法では・・・理解不足？

[7] mixiユーザー 09月16日 20:16

あっ

ごめんなさい不具合の内容勘違いしてました.....
（bug対応がないからかと....）

確かにこれだとスクロールして切れますね

[8] mixiユーザー 09月16日 20:35

「1.さいとうさん」が書いてる通り、div#pageの背景として青の画像を縦方向にリピートして敷いてあげると良いと思います。
もしくは全体が分からないのでなんと言えませんが、bodyの背景としても良いかもしれません。

div#pageに背景を指定する場合は、あわせて「overflow: hidden;」の指定が必要だと思います。

[9] mixiユーザー 09月16日 20:44

>P-o-N-Yさん

いえいえ。
そうなんです。切れちゃうんです。

指定方法が悪いのかとほぼ1日格闘していました・・・

>コバさん

ありがとうございますっ

「overflow: hidden;」の指定
了解しました！

[10] mixiユーザー 09月16日 22:29

あ、「height: 100%;」は全部消しちゃってくださいね

[11] mixiユーザー 09月16日 23:03

全く同じ所でひっかかっていましたが、解決しましたよ。
もし皆さんのやり方で解決出来なければ以下試してみてください。

【方法】
#pageの背景色の画像A(width700px、左から100px(#0099cc),10px(#333),590px(#FFF))を作り、#pageと#containerの背景に配置。
※以下の3パターンに対応するため、背景色の設定がだぶってます。
1. #sidebarのheight＞#containerのheight
2. #sidebarのheight＜#containerのheight
3. ブラウザのウインドウサイズ＞#sidebar or #containerのheight

対応ブラウザ：winIE5+、winFF2+、Macsafari3、MacFF2+

html, body {
height: 100%;
}
body {
margin: 0 auto;
background-color: #333;
}
#page {
background: url(#page背景色の画像A) center top repeat-y;
width: 700px;
margin: 0 auto;
position: relative;
min-height: 100%;
}
html>/**/body #page {
height:auto;
}
#sidebar {
background-color: #0099cc;
width: 100px;
float: left;
position: absolute;
left: 0;
}
#container {
background: url(#page背景色の画像A) center top repeat-y;
width: 590px;
padding: 0 0 0 110px;
float: left;
}

[12] mixiユーザー 09月17日 12:03

>コバさん

了解しましたっ。ありがとうございます！

>ayaさん

ありがとうございます！
試してみますね