スタイルシートで画面を縦に２分割する方法

質問

スタイルシートで左側にメニュー(class=menu)を、右側に本文を書くようなサイトを作っています。

body {
margin: 0px;
}
.menu {
background-image:url(./img.gif) ;
background-repeat:repeat ;
margin:0px ;
padding:10px ;
position:absolute;
width:150px ;
}

といった感じにしていましたが、左側メニューの背景がテキストの終端部分で切れてしまいます。（メニューの行数が短いので。）
私は、下までメニュー部分の背景がくるようにしたいのです。（つまり、画面が左右に２分割されるように）

そこで、いろいろ調べて、body{}と.menu{}に「height:100%;」を加えることによって、少し改善が見られました。
表示させると、画面がきちんと２分割されます。
しかし、右の本文が長い時、スクロールをすると、それに伴いメニューが上に行き、やはりメニュー部分の下部が空白になります。

スクロールしても、下まできちんと２分割できるようにするには、どうすればいいでしょうか？

たぶん、分かってしまえば簡単なことなのでしょうが、よろしくお願いいたします。

回答No.5

ao_ · ベストアンサー

こんにちは。
考え方は#4さんと同じなんですが、bodyにメニュー部分と本文部分の背景画像を一つにまとめ、リピートするのに最低必要な高さ（極力サイズを小さく）で作成しY方向だけにリピートさせる方法があります。この方法はA List Apartで掲載された偽カラムの作成方法です。

body {
margin: 0px;
background:url(背景画像.gif) repeat-y
}
.menu {
margin:0px ;
padding:10px ;
width:150px ;
float:left;
}
.本文{
float:left;
width:…;
}

説明が下手でごめんなさい。

参考URL：

http://www.alistapart.com/

お礼

ありがとうございました。ご紹介のサイトはよくわからなかったのですが、自己解決しました。
http://desperadoes.biz/style/p_frame.php
を参考にしたら、できました。
流れとしては、
class=body内にclass=menuとclass=mainを入れるのではなく、最大領域で、class=body内にclass=menuとclass=mainを作成し、class=menu内に適当なpaddingを設定したid（classも可）を作成し、そのid内に背景画像を入れるといった方針でできました。
当然、class=main内にも、適当なpaddingを設定したidを作成しました。
ありがとうございました。

回答No.7

quads

条件に合った構成を作成してみようと思いますが、もしよろしければ、既に作成されたソースを見せていただけますか…？

どのように要素を包含されているかも確認したいので…。

読み取れる限りの条件にあったものを考えてみますが…。

お礼

ありがとうございました。
自己解決しました。No.5に分かりにくい説明ですが、書いておきました。
www.mamapapa.net/kosodate/ 近日中ににアップする予定ですので、検索でこちらを見られた方は、まず、
http://desperadoes.biz/style/p_frame.php
を参考になさって、それがリンク切れなどの場合には、上記サイトでソースを見ていただければ参考になると思います。
最初は height など一箇所を加えたり直すだけでいいのかと思っていましたが、意外にも難問でした。

回答No.6

goldfox

#4　です。
本文が短い場合ですが、メニューがウィンドウの表示領域内におさまるのでしたら、本文のほうにheight:100%;を加えればよいかと思います。
あるいは、そのページは、本文のほうの背景をbodyに設定するとか。
height:100%;はページ全体に対する割合ではなく、表示領域に対する割合なので、スクロールするほど長さのないページならきれいにできます。

どのページにも同じスタイルで、というのであれば
他の方が提案しているように、背景を1枚に加工するか、テーブルを使うか、overflowを使ってしまう手もあるかと。

お礼

ありがとうございます。
本文の方が短くなるかどうかは、見る人の環境によるのではないかと思います。
大量の文章のため、左メニューのwidthは180pxぐらいの固定にしていますが、本文の部分は右端まで文章がくるようにしています。その場合、画面サイズ、最大化せずにブラウズする場合、左にお気に入りを表示させている場合などによって、どちらが長くなるか場合によって違うのではないかと思います。
いかがでしょうか。

回答No.4

goldfox

背景がメニューと本文の二つだけでよいのでしたら、メニューの背景をbodyに付けてはいかがでしょうか？
body {
margin: 0px;
background-image:url(メニュー側背景) ;
}
.menu {
margin:0px ;
padding:10px ;
width:150px ;
float:left;
border:solid 1px #ff0000;
}
.（本文）
{
background-image:url(本文側背景) ;
margin-left:170px;
padding:10px ;
border:solid 1px #0000ff;
}
分かりやすいようにborderを付けてみました。
本文のほうが短いとダメですけどね(^^;

お礼

２０～３０ページあるサイトなのですが、本文が短いページを見ると、やはりご指摘のように、うまくいきませんでした。
短いページですと、凹の形に背景が流れ込んでしまいました。
やろうとしていることは単純なのですが、スタイルシートでは意外と難しいんですね。
これって、スタイルシートが不十分だということなのでしょうか。
実はそのサイトは以前にフレームで分けていたのですが、リニューアルに際して、できるだけW3C準拠のサイトにしたいと思って、このような質問をさせていただきました。
でも、body全体に背景を指定して、本文(=main)部分の背景を別にというアイディアは素晴らしいと思いました。ありがとうございました。

回答No.3

Manuel

<table>を使えば出来ると思いますけど、それではダメですか？

お礼

お返事ありがとうございます。もうしばらくいろいろとやってみて、ダメだったらテーブルを使いたいと思います。サイトの性質上、できるだけレイアウト部分はスタイルシートでやりたいと思ったものですから....。

回答No.2

now77

#1です。

度々すみません。
今確認したら、
--------------------------------------------------
◆ background-attachment: attachment (C1/e4/N6)
　ウィンドウのスクロールを動かした時の背景の動作を

　　scroll（規定値：一緒にスクロールする）、
　　fixed（スクロールしない）、
　　inherit（継承）のいずれかで指定します。

--------------------------------------------------

とありました。fixedじゃまずかったです・・・。

BODY {
background-image: url(image/back.gif);
background-attachment: scroll;
}

でいかがでしょう。

参考URL：

http://www.tohoho-web.com/css/reference.htm#background2

お礼

早速のお返事ありがとうございました。参考のURLは私も見て、それらしいところをいろいろやってみたのですが、どうもうまくいかず、教えて！gooに頼ってしまいました。
ご教授の方法もアレンジしたりしながら、いろいろやってみたのですが、残念ながらうまくいきませんでした。

回答No.1

now77

あまり詳しくは無いのですが・・・

これではいかがでしょう

body {
margin: 0px;
}
.menu {
background-image:url(./img.gif) ;
background-attachment: fixed;
background-position: 100% 100%;
background-repeat: no-repeat;
width:150px ;
}