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

Question

スタイルシートで左側にメニュー(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%;」を加えることによって、少し改善が見られました。
表示させると、画面がきちんと２分割されます。
しかし、右の本文が長い時、スクロールをすると、それに伴いメニューが上に行き、やはりメニュー部分の下部が空白になります。

スクロールしても、下まできちんと２分割できるようにするには、どうすればいいでしょうか？

たぶん、分かってしまえば簡単なことなのでしょうが、よろしくお願いいたします。

ao_ · Accepted Answer

こんにちは。
考え方は#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/

now77 · Answer

あまり詳しくは無いのですが・・・

これではいかがでしょう

body {
margin: 0px;
}
.menu {
background-image:url(./img.gif) ;
background-attachment: fixed; 
background-position: 100% 100%;
background-repeat: no-repeat;
width:150px ;
}

now77 · Answer

#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

Manuel · Answer

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

goldfox · Answer

背景がメニューと本文の二つだけでよいのでしたら、メニューの背景を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を付けてみました。
本文のほうが短いとダメですけどね(^^;

goldfox · Answer

#4　です。
本文が短い場合ですが、メニューがウィンドウの表示領域内におさまるのでしたら、本文のほうにheight:100%;を加えればよいかと思います。
あるいは、そのページは、本文のほうの背景をbodyに設定するとか。
height:100%;はページ全体に対する割合ではなく、表示領域に対する割合なので、スクロールするほど長さのないページならきれいにできます。

どのページにも同じスタイルで、というのであれば
他の方が提案しているように、背景を1枚に加工するか、テーブルを使うか、overflowを使ってしまう手もあるかと。

quads · Answer

条件に合った構成を作成してみようと思いますが、もしよろしければ、既に作成されたソースを見せていただけますか…？

どのように要素を包含されているかも確認したいので…。

読み取れる限りの条件にあったものを考えてみますが…。

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

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

#1です。

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

背景がメニューと本文の二つだけでよいのでしたら、メニューの背景をbodyに付けてはいかがでしょうか？

こんにちは。

#4 です。

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

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

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

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

#4　です。