ログインしてさらにmixiを楽しもう

コメントを投稿して情報交換!
更新通知を受け取って、最新情報をゲット!

ホーム > コミュニティ > PC、インターネット > CSSテクニック > トピック一覧 > divの高さを100%に

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

  • mixiチェック
  • このエントリーをはてなブックマークに追加

コミュ内全体

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

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

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

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

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

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

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

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

<body>

<div id="page">
<div id="sidebar">
</div><!--END#sidebar-->
<div id="container">
</div><!--END #container-->
</div><!--END #page-->

</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)

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

<div id="page">
<div id="sidebar"> </div>
<div id="container"> </div>
</div><!--END #page-->

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

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

やっぱり書いたCSSでは永遠にスクロールに対応する100%にはならないのですね。。バッド(下向き矢印)
>Reekさん

わぁっ!
強引且つ素敵なワザですねっぴかぴか(新しい)

ものすごく参考になります!ありがとうございましたグッド(上向き矢印)
http://www.stylish-style.com/csstec/ultimate/height100.html

すでにチェックしてるかもしれませんがこちらも
>P-o-N-Yさん

ありがとうございますっ

でもこれは私の記述した方法では・・・理解不足?冷や汗
あっ

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

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

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

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

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

>コバさん

ありがとうございますっ

「overflow: hidden;」の指定
了解しました!電球
あ、「height: 100%;」は全部消しちゃってくださいね
全く同じ所でひっかかっていましたが、解決しましたよ。
もし皆さんのやり方で解決出来なければ以下試してみてください。

【方法】
#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;
}
>コバさん

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

>ayaさん

ありがとうございます!
試してみますねわーい(嬉しい顔)

ログインすると、みんなのコメントがもっと見れるよ

mixiユーザー
ログインしてコメントしよう!

CSSテクニック 更新情報

CSSテクニックのメンバーはこんなコミュニティにも参加しています

星印の数は、共通して参加しているメンバーが多いほど増えます。

人気コミュニティランキング

mixiチケット決済