帯を画面いっぱいに表示したい

質問

添付画像のように、２カラムデザインのページを作成したいと考えています。
左のコンテンツを赤色の帯状にして、画面をスクロールしても縦にコンテンツ幅いっぱいに表示されるようにしたいと考えています。（ヘッダーからフッターまで、ヘッダーとフッター上には表示させない）

左のコンテンツをdiv class="side"で囲って
.side{
background-color:#99;
height:100%;
float:left;
}
など試しましたが駄目でした

どのようにすればよろしいでしょうか？

回答No.6

nobuoka · ベストアンサー

#5 です。

> CS5を持っているので早速やろうと思います
> 初めに選ぶレイアウトのようなものでしょうか？

えっと、CS5 って Adobe 製品のことですよね？ 私が言ったのは CSS (Cascading Style Sheets) のことで、Adobe 製品とは特に関係ありません。 テキストエディタさえ使えれば実現できます。

> ソースを拝見するとJAVAスクリプトを使われているようですが
> レイアウトに必要なものでしょうか？

JavaScript を使った覚えがないけどゴミが残っちゃったのかなー、と思って確認してみたんですが、JavaScript は使ってませんです...よ？

何をやっているかはソースコードを見てもらえればわかるかなーと思って何もコメントは付けていませんが、1 箇所難しい箇所としては負の margin を使っているところがあるので一応解説しておきます。
サブ領域の幅を固定し、メイン領域の幅を可変になるように作っていますが、メイン領域の幅を可変にするために body 要素の左側に padding を設けて、サブ領域はその padding に収まるようにしています。 ここで、サブ領域を左側にずらすために負の margin を使用しています。

それと、メイン領域がサブ領域よりも縦の長さが短い場合に、メイン領域の下に空白ができてしまうのを防ぐために、メイン領域 (#main) の ::after 擬似要素で clear することで、サブ領域よりもメイン領域が短くなってしまわないようにしています。

あとは普通に float でサブ領域を左にずらしたりしてるだけですので、ソースコードを見てください。

お礼

失礼しました勘違いをしていました。
ソースを参考に作成させて頂きます。
どうもありがとうございました。

回答No.5

nobuoka

CSS 3 を使ってよいのなら、Box レイアウトなどを使えば簡単に実現可能ではありますが、CSS 3 を使わずに実現しようとするとなかなか難しいですね。
私も似たようなことをする場合は #4 の方の考え方で実現しています。

参考 URL のような感じでよいのではないでしょうか？

参考URL：

http://www.vividcode.info/sample/2011/0206_2col_layout.html

補足

CS5を持っているので早速やろうと思います
初めに選ぶレイアウトのようなものでしょうか？

ソースを拝見するとJAVAスクリプトを使われているようですが
レイアウトに必要なものでしょうか？

回答No.4

de_viant

私も同じような構成でページを作っていて躓きました。

結局、いい案が浮かばなかったので、間に合わせで以下のようにしました。

zyabaさんの配色でいえば、

全体の背景を赤にして、
その上に黒の背景のヘッダーとフッターを乗せて、そして、白い背景の右のカラムをのせました。

左のカラムは色を付けなければ背景色の赤の帯ができあがっていると思います。
どうでしょうか。

右のカラムが長いから使える手だとは思うのですが、、、。

お礼

どうもありがとうございました。
無事解決いたしました。

回答No.3

torayoshi

#2です。
良く分からなくなって来てしまったんですが…
↓こんなふうな感じではないですか？全然違う？
http://www16.plala.or.jp/zaq_501/test.html

お礼

まさにこんな感じです！！
しかし、これは500emの帯ができていると思いますが、
私の作っているサイドコンテンツ内には数行のテキストしかありません。

隣のメインコンテンツは相当スクロールしなければ見れないほど長いので、
サイドコンテンツも自動的に同じ長さになるようにしたいのです。

メインコンテンツの長さを測ってサイドのheight値を入力するしかないでしょうか？

回答No.2

torayoshi

赤帯の上下の余白は無視しても良いのなら、
.side{
background-color:#ad1d23;
height:auto;
width:***px;
float:left;
}
でどうですか？

#99という色はないのでは？
それと幅も指定する必要もあると思いますが。
上下の余白をなくしたいなら#1さんのようにmarginとpsddingで調整。

お礼

添付画像が悪く分かりづらいと思いますが；
スクロールしても縦の画面幅いっぱいに表示される
赤い帯を作りたいのです。

補足

上記の方法だと
side内のテキストの背景しか赤くなりませんでした
テキスト以下もずっと下まで帯のように赤くしたいのです；

回答No.1

4649panda

上下に余白(背景が赤くならない場所)が出るということでしょうか？

.sideを高さ100%に指定しても親要素にパディングやマージンが設定してあると余白が出る事があります。
親要素のマージンとパディングを0にして、それぞれの高さを100%に指定して、一度チェックしてみてはどうでしょうか？

html, body {
margin: 0;
padding: 0;
height: 100%;
}

#container {/*←.sideが入っている要素名 */
margin: 0;
padding: 0;
height: 100%;
}

もうお試しでしたらすみません。

お礼

皆様どうもありがとうございました。
無事解決いたしました。

補足

それ以前の基本的な話かもしれません；

縦に長～いページなのですが、
ヘッダーからフッターまで帯状に背景色が赤いカラムを作りたいと考えています。
その方法を知りたいです。