div領域をウインドウサイズに合わせる

divタグで生成された３つの領域を横に並べたいのですが、
左２つは幅をピクセル指定で固定し、３つめをウインドウサイズに合わせて残りの幅全てを使う、という指定はどうすればいいでしょうか？
高さもやはりウインドウサイズにあわせるようにしたいです。
また、左２つの領域は固定したまま、３つめの領域のみスクロールができるようしたいです。

現在下記で試していますが、うまくいきません。
お分かりになる方、知恵をお貸しくださいo（_ _*o）


【HTML側】

<div id="left">１</div>
<div id="center">２</div>
<div id="right">３</div>


【CSS側】

html,body{
　　height:100%;
　　width:100%;
　　　　　　}
div#left{
　　width:150px;
　　height:100%;
　　float:left;
}
div#center{
　　width:160px;
　　height:100%;
　　float:left;
}
div#right{
　　width:100%;
　　height:100%;
　　float:left;
}

No.1 ベストアンサー 回答者： ORUKA1951 回答日時： 2011/05/15 01:49

できません。

　そうなるとHTMLではなくてPDFなどの他の仕様の範疇です。
　HTMLは、元来さまざまなプラットホームで利用できるように考案されたものです。すなわちさまざまな解像度、ウィンドウ幅、点字端末、読み上げブラウザ・・検索エンジンも・・
　HTMLの基本中の基本です
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )］より

　それはともかく、HTMLはワープロやDTP ( http://ja.wikipedia.org/wiki/DTP )のようなデザインのためではありません。これを最も間違える部分です。

　ですのでマークアップは（インデントがわかりやすいようにタブを全角スペースで置き換えてあります）
<div class="section">
　<h1>サンプル</h1>
　<div class="body">
　　<h2>見出し</h2>
　　<p>段落</p>
　　<p>段落</p>
　</div>
　<div class="nav">
　　<ul>
　　　<li>あいう</li>
　　　<li>えおか</li>
　　</ul>
　</div>
　<div class="contentTable">
　　<h2>目次</h2>
　　<ol>
　　　<li>きくけ</li>
　　　<li>こさし</li>
　　</ol>
　<div>
</div>
</body>


とかになるはずですね。HTMLは文書構造を示すもの。CSSはプレゼンテーションを示すものという明確な区別があります。id=leftなんて、しないこと。先で右に配置したくなったらどうするの・・

　さて、div要素の幅はウィンドウ幅を認識できますが、高さはウィンドウの高さを認識しません。IEの互換モードにすれば、IEのバグ(仕様？)でウィンドウ高さを使えます。そのときdivの親要素がbodyなので、body{height:100%;}が必要。
　★ただしこの方法は非推奨です。他のブラウザではうまくいきません。

　ディスプレイ幅が小さなブラウザ、あるいは目が悪くてフォントを拡大して見られる訪問者のことも考えれば高さは指定すべきではありません。

　よって幅だけを指定する方法を上記HTMLでしたら
html,body{margin:0;padding:0;}
div.section{width:100%;position:relative;background-color:gray;padding-left:320px;}
div.section div.nav,
div.section div.contentTable{position:absolute;top:0px;height:1000px;}
div.section div.nav{left:0px;width:150px;background-color:green;}
div.section div.contentTable{left:150px;width:160px;background-color:blue;}
でよい。

　floatは、ここで使うべきじゃありません。あくまで文章中の画像の周囲に本文を回りこませるためや(小さなブロックをウィンドウ幅に合わせて並べるとか)に使うものです。もし本文でfkoatの必要がでてきたとき、clearできなくなっちゃう。


　

この回答へのお礼

回答ありがとうございます。
独学で初心者なので基礎がわかっていなかったようです、すみませんo（_ _*o）
ORUKA1951さんの回答を読んで、おおすごい！なるほど！と納得しました。
少々難があるようなので、無理矢理作るよりも、もっと見る人に優しいデザインに変えてみたいと思います。
ありがとうございました！

お礼日時：2011/05/15 17:09

No.2 回答者： abacabu 回答日時： 2011/05/15 03:39

独学でＷＥＢサイトを作成している者です。

多少勘違いをしている様ですのでちょっと訂正をしておきます。
px値も％同様れっきとした相対単位です。
pxという単位の基準が画面サイズです。従って画面の大きさによって広さが変わります。
なので全て％値で良いのではないでしょうか？
どうしても絶対値指定したいならｐｔとかで指定して下さい。絶対お勧めはしません。
で、rightのみスクロールバーを付けたいというのはその位置以外は動かない様にしたいというのと同義語ですよね？
余り推奨されてはいませんが、画面にスクロールしても常に同じ位置に表示させる事は可能です。
ＣＳＳでposition:fixed;(positionのabsoluteを指定したと同じで、さらにスクロールしても同じ位置に表示される)を指定してスクロール対象から外します。同時にtop,left,right,bottomなどで位置調整して、z-index:10;(HTMLで書かれた上部項目からどんどん数値が上がるようですのでページが長くスクロールで隠れる様なら数値を上げて下さい。初期値：body=0)と指定して、id=leftとid=centerを位置決めして下さい。
私がやるなら
div#left{
display:block;
background:#eeeeee;
position: fixed;
width:150px;
height:500px;
z-index:1; /*今回これないと表示されないので最低限の１ですが
画面全体の階層数に応じて増やして下さい*/
}

div#center{
display:block;
background:#ffff66;
position: fixed;
padding-left: 160px;
width:160px;
height:500px; /*この項目にもz-indexを追加して下さい。文字記入して
行ったらスクロールすると非表示(下に隠れる)になります*/
}

div#right{
display:block;
background:#ffccff
width:77%;
padding-left:330px;
height:500px;
background:#ffccff; /*ここは特にz-indexは必要ないです一番高い階層ですから*/
}
こうなります
中身が無いのでdisplay:block;で表示させてます。
全てのボックスの起点はleft:0;です。
で、padding-leftを使って文字の出力位置を調整しています。
さらに画面幅いっぱいでの注意!!ＣＳＳ全体に言えるが…
ボックスの幅（あえてこう書いています）というのは
width+margin+padding=画面全体となりますので、調整する際はこの３つの要素を足し引きして
調整します。物の幅＝widthではありませんのでこの点にご注意を!!
あとそのＣＳＳは本来のではなくここで書いた物ですよね?
それコピペして検証しようとしたら全角スペース入ってたんで…（入ってると機能しません）
使うならTABキーを!!

この回答へのお礼

回答ありがとうございますo（_ _*o）
pxが相対単位だというのは知りませんでした・・・勉強になります。
やはり熟練の方からしたら無理な注文、といった感じなのですね；
デザインをかえて作り直してみます。ありがとうございました！

お礼日時：2011/05/15 17:13