掲示板/スタイルシート質問板/過去ログ/一覧/ ボックスでの高さ指定方法

0 名前： ビスタ ： 2006/11/20（月） 22:14 ID:LbD.TDcT: IE6.0,WinXPで確認しています。

一応検索をかけたのですが求めてる主旨とは違うようなので
（カラム数が違うみたいなので……）

ウィンドウサイズに合わせて、以下のようにheight:100%;、
overflowをautoにしているのですがメイン部分が何故か下に伸びてしまいます。
しかもナビ部分（leftbox）が下まで届かずに不自然です……

/ＣＳＳ部/
*{margin : 0; padding : 0;}

body{width:100%;
　　 height:100%;
background-color : #000000;}

#mybody{margin:0 auto;
width:95%;
position : relative;
}

#myheader{width:100% ;
height:50px ;
color:#3333aa ;
font-size:40px;
background-color:#cccccc;}

#myfooter{width:100%;
height:20px;
clear:both;
background-color:#cccccc;
color:#ffffff;
font-size:12px; }

#leftbox{position:relative;
float:left;
width:150px;
font-size:12px;
background-color:#9a88cc;}

#mainbox{margin-left:150px;
padding:8px;
border-left:1px solid #000000;
background-color:#ffffff;
color:#444444;
font-size:14px;
line-height:130%;
overflow:auto;
}
#mymain{background-color:#ffffff;
height:100%;}

/html部/
<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=shift_jis">
<link REL="stylesheet" href="air.css" TYPE="TEXT/CSS">
<meta http-equiv="content-style-type" content="text/css">

<title></title>

</head>

<body>
<div id="mybody">

<div id="myheader">ヘッダー</div>

<div id="mymain">

<div id="leftbox">
ここにナビゲーション
</div>

<div id="mainbox">
<br>
あaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
<br> あaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
<br> あああaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
<br> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
<br> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
<br> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
<br>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
<br>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
<br>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
<br>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
<br>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
<br>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
<br>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
<br>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
<br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa
<br>aaaaaaaaaaaaaaaaaaaaaaaa
a<br>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
<br>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
<br>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
<br>aaaaaaaaaaaaaaaaaaaaaaaaaa
<br>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
<br>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
<br>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
<br>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
<br>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
<br>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
<br>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
<br>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
<br>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
<br>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
<br>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
<br>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
<br>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>
</p>
<p>
</p>
</div>

</div>

<div id="myfooter">フッター</div>

</div>

</body>
</html>

こんな感じです。
お願いします

1 名前：アヤ： 2006/11/20（月） 22:14 ID:I/L72zbC: 「overflow:auto;」を使用するということは、擬似フレームでしょうか？
結果的にどうしたいのか、はっきりとわかりませんので、とりあえず疑問である部分のみ解答させていただくと。
>メイン部分が何故か下に伸びてしまいます。ナビ部分（leftbox）が下まで届かずに不自然です。
これは、共に高さを指定すればよいかと。

2 名前： ビスタ ： 2006/11/20（月） 22:14 ID:LbD.TDcT: ＜アヤさん
返答、ありがとうございます。

>「overflow:auto;」を使用するということは、擬似フレームでしょうか？
あ、そうですね。すみません。最後に疑似フレームにする予定なので
overflowも先に書いてあるんです。
overflowが問題になるようでしたらもう一度組み直してみます。

>これは、共に高さを指定すればよいかと
高さを絶対値指定してしまうとウィンドウを縮小した時に使いづらい
（bodyごと下にスクロールしないと全文が読めない）と思ったので……
ウィンドウの大きさに合わせたいので相対値で指定したいのですが

height:100%;

をそれぞれ（leftbox,mainbox）に指定しても反映されないんです。
（そのうえ「mainbox」で「height:100%;」を指定すると横幅がフッターより
　長くなってしまいます）

heightを書く場所が間違っているのでしょうか……？

わかりにくいようなので最終的な希望としてまとめると

・leftboxとmainboxの高さを揃えたい
・ヘッダー、フッター、leftbox、mainboxを１組として、
　高さをウィンドウの高さに合わせたい。
　（leftbox、mainboxだけ高さが可変になるようにしたい）

と以上です。

すみませんがよろしくお願いします。

3 名前： くいん ： 2006/11/20（月） 22:14 ID:nM/3KUU4

>・leftboxとmainboxの高さを揃えたい

という部分のみですが…

#leftbox{position:relative;
float:left;
width:150px;
font-size:12px;
background-color:#9a88cc;}

#leftbox2{position:relative;
float:left;
font-size:12px;
background-color:#9a88cc;}

#mainbox{margin-left:150px;
padding:8px;
border-left:1px solid #000000;
background-color:#ffffff;
color:#444444;
font-size:14px;
line-height:130%;
overflow:auto;
}

<div id="leftbox2">
<div id="leftbox">
ここにナビゲーション
</div>

<div id="mainbox">
<br>
あaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
<br> あaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
<br> あああ
</div>

</div>

コピーペーストで作ったので、
数値やID名などはご自分で調整してくださいね。
高さの可変は苦手分野なもので…考え中です

>（カラム数が違うみたいなので……）

とありますが、まったく同じ条件でなくては使えない情報だったのでしょうか？
応用してできそうなら「検索したのはコレなんですけど…これみたいに」など例として出して頂くと、質問者、返答者共に助かると思うのですが。

4 名前：イサ： 2006/11/20（月） 22:14 ID:0yJG31Zh

mainboxに文字を記入し文字数が増えれば、改行し縦幅が増えるのは当然です。
leftboxの背景色を、下まで反映したいのであれば下記ソースでいかがかと？

<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<META HTTP-EQUIV="CONTENT-STYLE-TYPE" CONTENT="text/css">
<title></title>
<style type="text/css">
<!--

body  {background-color:#000000;}

#myheader   {width:100%;
             height:50px;
             color:#3333aa;
             font-size:40px;
             background-color:#cccccc;}

#leftbox{float:left;
         width:25%;
         height:100%;
         font-size:12px;
         background-color:#9a88cc;}



#mainbox{float:left;
         width:75%;
         height:100%;
         padding:8px;
         border-left:1px solid #000000;
         background-color:#ffffff;
         color:#444444;
         font-size:14px;
         line-height:130%;}

#myfooter{width:100%;
          height:20px;
          background-color:#cccccc;
          color:#ffffff;
          font-size:12px; }

-->
</style>
</head>
<body>
<div id="myheader">
ヘッダー
</div>
<div id="leftbox">
ここにナビゲーション
</div>

<div id="mainbox">
<br>
あaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
<br> あaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
<br> あああ
</div>
<div id="myfooter">
フッター
</div>

</body>
</html>

ウインドサイズに合わせて、という事にこだわるなら上記のようなレイアウトになります。
つまり、幅を１００％に指定すると、レフトボックスの幅も％で指定するしかありません。

ウインドサイズ全体に合わせる事に、こだわらなくても良いと僕は思うのですが・・・

5 名前：イサ： 2006/11/20（月） 22:14 ID:0yJG31Zh: >>1
＞overflowをautoにしているのですがメイン部分が何故か下に伸びてしまいます。
height="100%"にしているからといって、ウインドサイズ縦幅で固定されるわけでないと思います。（おそらくブラウザの仕様だと思いますが・・・？）
　
もし、確実に縦ウインドサイズに合わせる事にこだわるならば、テキスト記述による改行
される縦幅に気をつけながらテキストを記述するしかないと思います。

他に方法があるのかもしれませんが、僕は知りません。

6 名前： ビスタ ： 2006/11/20（月） 22:14 ID:LbD.TDcT: ＞応用してできそうなら「検索したのはコレなんですけど…こ＞れみたいに」など例として出して頂くと、質問者、返答者共＞に助かると思うのですが。

とのことで、出してみます。

名前：ママン［ 2006/04/05 22:53 ］ UA

モジラ系ブラウザで、上下縦一杯のボックスを作るには、どうすればよいのでしょうか？
IEだと、height:100%;で良いですが、FireFOX等だと、人間の目では、何も表示されない様に見えます。（見えないという事。）
どうすれば、ブラウザ内の表示位置の上下縦一杯に、高さを定めることが出来るのですか？
【条件】
CSS表記によるもので、ボックスは、ブラウザの枠が、最大化または、縮小でも、上下縦一杯で見える様にする。

↑この質問では、１組（１つ？）のボックスの塊が上下一杯
にしたい、ということでいいですよね？
これは、もともとheight:100%;で妥協しているので
今回の質問とは関係ないようなきがします。

ただ、入れ子にして高さを揃えるのは記述がありましたね。
それに関しては完全に私のミスです。
大量のスレッドで読み飛ばしてしまったようです。
すみません……。

とりあえず、一番求めているものと近いのは以下のレスで

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><title></title>
<style type="text/css"></style>
</head><body>

<div id="div00">

<div id="div0"></div>
<div id="div1">
あいうえお<br>あいうえお<br>あいうえお<br>あいうえお<br>
あいうえお<br>あいうえお<br>あいうえお<br>あいうえお<br>
あいうえお<br>あいうえお<br>あいうえお<br>あいうえお<br>
</div>

<div id="div2">
</div>

</div>
<div style="clear:both;"></div>

</body></html>

これを↓のように書き換えてみました。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">
<html><head><title></title>
<style type="text/css"></style>
</head><body>

<div id="div00">

<div id="div0"></div>
<div id="div1">

</div>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa
</p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa
</p>aaaaaaaaaaaaaaaaaaaaaaaaa
<p>aaaaaaaaaaaaaaaaaaaaaaaaa
</p>aaaaaaaaaaaaaaaaaaaaaaaaaaa
<p>aaaaaaaaaaaaaaaaaaaaaaaaaa
</p>a
<p></p><p></p><p>a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
aa
</p>
<p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p>

<p></p><p></p><p></p><p></p><p></p>
<p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p>
あいうえお<br>あいうえお<br>あいうえお<br>あいうえお<br>
あいうえお<br>あいうえお<br>あいうえお<br>あいうえお<br>
あいうえお<br>あいうえお<br>あいうえお<br>あいうえお<br>
　　　　　　　　　　　　　　

　　　　　↑文字列をdiv2からdiv1へ変更

<div id="div2">

</div>
</div>
<div style="clear:both;"></div>

</body></html>

しかし、スクロールは出来ませんでした。
他のoverflowをautoにすると段組がぐちゃぐちゃに
なってしまいます。

この質問では
モジラ用に画像を左サイドバーの背景にして
解決してました。

このスレの他レスに
ＩＥなら左ボックスなら「overflow」を「scroll」すると
書いてあったのですが
私がメインにしたいほうでそれを指定しても
overflowをautoにするのと同様の結果になってしまいました。

7 名前：イサ： 2006/11/20（月） 22:14 ［URL］ ID:0yJG31Zh: 何がしたいのかがわからなくなりました。

スクロールバーを非表示（hidden）にしておいて、スクロールをしたいという事なのか？

・・・そんな事は、不可能だと思うし？？

>>6
＞希望に1番近い。しかし、スクロールは出来ませんでした。

>>4
＞＞６と変わらなくてスクロールも出来るのですが・・・
何が、希望と違うのでしょうか？

8 名前： ビスタ ： 2006/11/20（月） 22:14 ID:LbD.TDcT: ＞イサさん、くいんさん
ご返答ありがとうございました。
くいんさん、レスで追記したにもかかわらず、お礼の方が遅くなりました。
すみません（汗／重ね重ね

>height="100%"にしているからといって、ウインドサイズ縦幅で固定されるわけでな
>いと思います。
あ、そうなんですか。左のボックスは後で画像を入れるので幅は固定なんです。
高さは絶対値指定するしかないですね……。

あ……leftbox,mainboxに「margin-bottom」で下からの高さで指定してみたりしたのですがやはり反映できませんでした。

これも原因不明です。

9 名前： ビスタ ： 2006/11/20（月） 22:14 ID:LbD.TDcT: こちらの手違いで「擬似フレーム」を「疑似フレーム」と入力して
検索していたようです。

どちらにせよ、ここの掲示板では出てこなかったのですが
もう一度調べてからまた来ます。

今回の書き込みはここで終了ということでお願いします。

返答をくださったみなさん、ご迷惑おかけしました。