画面サイズの変化で中心部分の箱のサイズだけ変えたい・・・

[統計] HTMLからXHTMLへの移行を進めていますか？

0   名前： もも ： 2006/10/07（土） 10:15  ID:xlvY4Uqe
スタイルシートを使って、

　　<div id = "コンテナ">　
　　　　<div id = "ヘッダ"></div>
　　　　<div id = "ミドル"></div>
　　　　<div id = "フッタ"></div>
</div>

と、大まかにこのような構成にしてあります。
　　ヘッダの箱、フッタの箱は、高さに具体的な数値を決めて、
　　その間の　ミドルの箱　の高さを画面サイズに合わせて縮小拡大させたいですが・・・
　　　　
現在　コンテナ　の高さを　100%
　 ヘッダ　の高さを　200px
フッタ　の高さを　200px
　　ミドル　の高さを　100%

　　と、設定しているのですが、ミドルの高さ　が、普通に　画面のサイズの高さ　になってしまいます。

　　画面の表示領域の高さが　700px　だとして、
　　700px　−　（ヘッダの高さ＋フッタの高さ）　＝　300px
　　この　300px　いっぱいいっぱいに　ミドル　を表示させるには、どのようにしたらいいのでしょうか？？
1   名前： utt ： 2006/10/07（土） 10:15  ID:JARqwFtT
「画面のサイズの高さ」というのは
(画面の表示領域を700pxとした時)700px表示されてしまう、ということで宜しいのでしょうか？

だとするとミドルの高さは特に設定する必要がないと思います
設定しなくても、自然にヘッダとフッタの間いっぱいに表示される筈です
2   名前： 匿名 ： 2006/10/07（土） 10:15  ID:2fg5Gx9m
> だとするとミドルの高さは特に設定する必要がないと思います
> 設定しなくても、自然にヘッダとフッタの間いっぱいに表示される筈です

いえ、ミドルの量によって、フッタの位置が変わってしまいます。
（少ない場合は上に行ってしまうし、多い場合はスクロールしないと見えなくなってしまう）

> ヘッダの箱、フッタの箱は、高さに具体的な数値を決めて、
> その間の　ミドルの箱　の高さを画面サイズに合わせて縮小拡大させたい

ヘッダ・フッタを % で指定すれば、
ヘッダ: 20% / ミドル: 60% / フッタ: 20% のようにできますが、
ヘッダ・フッタを px で指定した場合は、残念ながら現在の CSS の仕様ではできません。

CSS3 の Working Draft では、calc 関数が提案されていて、
100% - 300px のような指定ができるようになる予定です。

CSS3 Values and Units - WebStudio
http://www.d-toybox.com/studio/weblog/show.php?mode=single&id=2006092100

IE ユーザは、こちらも参照してください。
application/xhtml+xmlで提供されるコンテンツについて - WebStudio
http://www.d-toybox.com/studio/detailofmime.html
3   名前： 匿名 ： 2006/10/07（土） 10:15  ID:i4s77xzC
CSS2の範囲内で可能だと思うよ。

.container { position: relative; }
.header    { height: 200px; }
.middle    { position: absolute; top: 200px; bottom: 200px; width: 100%; }
.footer    { height: 200px; }


ただし某シェア最大ブラウザは、topとbottomを同時指定するとbottomを無視するというお馬鹿なバグを抱えている。
そして厄介なことに、これに対するCSSハックはない。少なくとも俺は思いつかない。
JScript前提なら、expression()で動的計算させることは可能だが、かなり重たくなる。
4   名前： 匿名 ： 2006/10/07（土） 10:15  ID:i4s77xzC
>>3
まだ全部書いてなかった。

.header    { position: absolute; top: 0; width: 100%; height: 200px; }
.footer    { position: absolute; bottom: 0; width: 100%; height: 200px; }


話ついでに、IE＋JScriptで何とかするなら

.moddle {
  _height: expression(this.parentNode.offsetHeight - (this.previousSibling.offsetHeight + this.nextSibling.offsetHeight) + 'px');
}


試してないけどこんな感じ。たぶん激重。
5   名前： くいん ： 2006/10/07（土） 10:15  ID:nM/3KUU4
ヘッダ、ミドル、フッタの内容をどこまで縮小していいのか、
ウィンドウを極端に小さくした時にどう表示されていればいいのかがわからないので、
ミドルのボックスがウィンドウサイズによって可変しているように見えるだけの方法を一つ。

<style type="text/css"> 
<!-- 
body {margin:0px; padding:0px; backgorund-color:#fff; height:100%; color:#fff;}

.h {width:200px; height:200px; background-color:#555; margin:0px;}
.m {width:200px; height:100%; margin:0 0 0 0; background-color:#000;}
.f {width:200px; height:200px; background-color:#555; position: absolute; bottom: 0px;}
--> 
</style> 
</head>
<body>

<div class="m">
 <div class="h"></div>
  <div>
  あああああ。
  </div>
 <div class="f"></div>
</div>

</body>
</html>



↑ウィンドウを縦400pxより縮めていくと、色々とバレます。

まぁ…ヘッダに侵食してしまう辺り使えなさそうですけど。
一覧へ戻る