- PR -

CSS:ウィンドウリサイズに対応するスクロールバー付きのブロック

1|2 次のページへ»
投稿者投稿内容
豪雪地帯
常連さん
会議室デビュー日: 2004/06/08
投稿数: 34
投稿日時: 2004-10-07 20:19
こんにちは。
CSS(カスケードスタイリングシート)のことでお尋ねします。(ここで良いのかわかりませんが)

ウィンドウ内に２つのブロックがあり、１つはウィンドウ下部に固定的な高さで表示し、
他方はその上の残りの領域一杯に縦スクロールバー付きで表示し、ウィンドウの高さ
が変更されたら、スクロールバーのブロックの方だけが、その変更量に合わせて、
下部のブロックを差し引いた高さに自動調整される、というような指定をCSSで
作りたいのですが、「下部のブロックを差し引いた高さに自動調整」させる方法が
わかりません。

どなたかご教唆願います。
豪雪地帯
常連さん
会議室デビュー日: 2004/06/08
投稿数: 34
投稿日時: 2004-10-07 20:44
一応、自分のコーディングを載せます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>スクロール</title>
<style type="text/css">
<!--
.scrl {position:absolute; overflow:auto; height:88%; z-index:1;}
.footer {position:absolute; bottom:0px; height:40px; background:green; z-index:2;}
body {margin-top:0; margin-left:0; margin-bottom:0; margin-right:0;}
-->
</style>
</head>
<body>
<div class="scrl" id="mdfrm">
<table border=4 width=400 align=center>
<tr bgcolor="#cccccc">
<th><br></th>
<th>列-A</th>
<th>列-B</th>
<th>列-C</th>
</tr>
<tr align=center>
<td rowspan=3>行-1〜3</td>
<td>A1</td>
<td>B1</td>
<td rowspan=2>C1-C2</td>
</tr>
　・・・（以下テーブルの行がずっと続きます）
</table>
<hr>
</div>

<div class="footer">
This is FOOTER<br>&#160;&#160;&#160;
<input type="button" value="button1">&#160;
<input type="button" value="button2">&#160;
<input type="button" value="button3">
<hr color="green">
</div>

</body>
</html>
Jitta
ぬし
会議室デビュー日: 2002/07/05
投稿数: 6267
お住まい・勤務地: 兵庫県・海手
投稿日時: 2004-10-12 20:55
　CSSじゃなく、JavaScriptとかDHTMLですね。
　window.documentに、onresizeというイベントがあります。このイベントは、ウインドウのサイズが変更されると発生します。なので、このイベントにハンドラを追加して、その中で「ブロックの高さを変える」処理を追加します。ブロックの位置は、positionをrelativeにすると、取ることができます。この属性は、要素の位置を「次に表示するべき位置からの相対位置で指定する」ですが、表示された後にx,yを参照すると、absoluteと同じ値が返ってきます。
　要素の値とブロックの位置の関係については、MSDNに記述があります。VS.NET2003の場合、次のURIを、ヘルプのアドレス欄に入力してください。
ms-help://MS.MSDNQTR.2003FEB.1041/jpisdk/dhtml/measure/measuring.htm
オンラインはこちら
＃「MS.MSDNQTR.2003FEB.1041」を、
＃インストールされているMSDNにあわせて変更します。
＃「2003FEB」の部分だけ書き換えればよいはずです。

　これで「表示するべきものの大きさ」、「表示する領域の大きさ」がわかりますから、「表示する領域の大きさ」から、「下に表示される固定の大きさ」と「上に表示される固定の大きさ」を引いたものが、「可変の大きさを持つ表示領域の大きさ」になります。

　なお、IEとそれ以外では取れる値が違いますので、その辺は調べてください。


　と、書き終わってから気がついた。
引用:

CSSで作りたい

無理でしょう。CSSでは動的に変化する値を宣言できませんから。横の場合、col、colgroupに＊を使うことで、できるんですけどね。縦の場合、ファイルすべてを表示した後に計算、そして計算によって縦の長さが変わった場合、再計算をする？みたいなところで、無理があると思います。
豪雪地帯
常連さん
会議室デビュー日: 2004/06/08
投稿数: 34
投稿日時: 2004-10-14 16:17
Jittaさん、皆さん、こんにちは。

当初、Javascriptを検討したのですが、取れる値が怪しかったので、やめました。
でも、
引用:

CSSで作りたい

で、★★★★CSSで出来ました。★★★★

でも私が解決したのではなく、別のサイトへ同様な事を投げかけたところ、答えてくれました。
ここにそのまま掲載するのは、サイトとその方へ失礼になると思いますので、リンクを掲載します。

"ＣＳＳなんでも質問箱"（No.612　Re: CSSで画面３分割）
http://hpcgi2.nifty.com/yoshi-m/makehp/q_a/css/wforum.cgi?no=612&reno=608&oya=608&mode=msgview&page=0
MMX
ぬし
会議室デビュー日: 2001/10/26
投稿数: 861
投稿日時: 2004-10-14 17:54
仕組みは、自分の可変サイズを指定するのでなく、
３面別々に、外枠からの変位量（これは固定）を指定する、ですね。
頭のDOCTYPEも含めて、参考になります
Jitta
ぬし
会議室デビュー日: 2002/07/05
投稿数: 6267
お住まい・勤務地: 兵庫県・海手
投稿日時: 2004-10-14 23:31
　ほう！おもしろい！！

　bodyのパディングを100px取って、headerを(0,0)絶対位置から高さ100px取るので、bbodyのパディング内に収まると。ということは、ヘッダーの高さを変えるには、２つの値（フッターも同じく）を変更する必要がある、と。

　へぇ、IEは、コメントをこんな風にif文つけられるのか。これは、『（Conditional
Commentsなんか使ってるんだから正しい訳ないか・・）』のあたり、IE特有ですね。
_________________
豪雪地帯
常連さん
会議室デビュー日: 2004/06/08
投稿数: 34
投稿日時: 2004-10-15 09:51
引用:

Jittaさんの書き込み (2004-10-14 23:31) より:
　ほう！おもしろい！！

　bodyのパディングを100px取って、headerを(0,0)絶対位置から高さ100px取るので、bbodyのパディング内に収まると。ということは、ヘッダーの高さを変えるには、２つの値（フッターも同じく）を変更する必要がある、と。

本当にすごいです。
もし、headerのheightを40pxに変えた場合は、bodyのmargin-topと.scrlのtopを40pxに
する、という事になります。(I.E.の場合)
Jitta
ぬし
会議室デビュー日: 2002/07/05
投稿数: 6267
お住まい・勤務地: 兵庫県・海手
投稿日時: 2004-10-15 21:19
　詳しく見てみました。ブラウザに依存しますね。
　FireFox0.9、IE6.0SP1、Opera7.53jaで試してみました。FF、IEでは希望通りの動作をしますが、Operaではウインドウサイズの変更に追従しません。また、IEでも、DOCTYPE宣言を変更して「標準モード」でレンダリングするようにすると、うまくいきません。FF、Operaとも、「標準モード」でも、同じ動作になります。
　IEの場合は、DOCTYPEを「互換モード」に設定することで、IEの互換モードでのHEIGHT要素が「パディングとボーダーと内容の和」であるという、CSSの仕様から外れた仕様、を利用しているようです。また、条件コメント内で再定義しているscrlの「HEIGHT:100%」も、「互換モード」でのみ、希望通りの解釈がされます。
　その他のブラウザでは、srclクラスを「（直前の要素の）上から100ピクセル、底から100ピクセル」と指定することで、オーバーフローを「自動スクロール」とすることで、表示しています。IEでは「底から100px」が解釈されないようです。この100ピクセルが、同時にヘッダー、フッターの「高さ」になります。そして、「底から100ピクセル」の、解釈になるのかな？Operaはバグっぽいなぁ。互換モードでは最初の描画時のみ計算されるようです。標準モードにすると、サイズ変更時も計算しようと試みているようでが、表示が崩れました。
1|2 次のページへ»

スキルアップ／キャリアアップ（JOB@IT）