疑似フレーム 縦の可変+固定
-
0 名前： K+S ： 2006/11/30（木） 14:18 ID:nROqylMa
- 疑似フレームについてですが、
http://web.archive.org/web/20060527065404/www.fromdfj.net/html/overflow.html
こちらで説明されているものの、
http://web.archive.org/web/20060527070708/www.fromdfj.net/html/sample/overflowsample02.html
このような上下の分割を、HTML+CSSのみで固定幅と可変幅で実現することは可能でしょうか。
-
1 名前： アヤ ： 2006/11/30（木） 14:18 ID:I/L72zbC
- どの部分が固定なのかは不明ですが、例えば上下段（ヘッダー＆フッター部分）を固定させて中段を可変というようなことをやる場合、上下段の位置固定したボックスを、z-indexで重ねれば可能になるんじゃないでしょうか。
それ以外となると、思いつかないです。
-
2 名前： くいん ： 2006/11/30（木） 14:18 ID:nM/3KUU4
- 上下の分割を、HTML+CSSのみで固定幅と可変幅で実現とは、
こちらでご紹介されているような事でしょうか？
http://blog61.fc2.com/w/wemolog/file/rowframe.html
-
3 名前： K+S ： 2006/11/30（木） 14:18 ID:nROqylMa
- >>1-2
質問が不明確で申し訳ありません。
>>1 で仰られているように、ヘッダーとフッターの高さを固定幅として、コンテンツ部を可変としたい場合を想定します。
フレームの <frameset rows="100,*,50"> の構成にあたるレイアウトを CSS で実現できないかと考えました。
相対幅指定と固定幅指定の段組は、横であれば width:auto の概念があるため実現できますが、
縦では、相対指定に対する固定幅の算出を行なわないと実現できないと認識しています。
しかしながら、この度改めて考察する機会があったのですが数時間考えて行き詰ってしまったので、
何か代替策に繋がるヒントでも生まれないかと思い質問させていただきました。
>>2 で紹介されている構成は、
ヘッダー
コンテンツ
フッター
という形であれば実用可能ですが、
ヘッダー
メニュー コンテンツ
フッター
などと端以外にスクロールバーが生じることを考慮すると対応できません。
メニューを含めたレイアウトで実装するとなると、direction プロパティなどでメニュー部のスクロールバーを左端に表示させることも考えられますが、
その前に何らかの方法でうまく実現できないかと思った次第でございます。
frame 関連要素あるいは table 要素を利用すれば実現は可能ですが、技術的に現段階における HTML+CSS で実現できないかといった意味で質問いたしました。
冗長な文章失礼致しました。
-
4 名前： アヤ ： 2006/11/30（木） 14:18 ID:I/L72zbC
- 頭の中で思い浮かべていたのが、まさに>>2のやりかたでしたので、お役には立てそうにありません。
ヘッダー
メニュー コンテンツ
フッター
の場合おっしゃられてる通り、端以外にスクロールバーが生じる結果となりますね。
個人的には、あまりカラム数の多いページを構築したことはありませんので（分けても左右くらい）、こういうことは考えたことはありませんでしたが。いろいろと試してみるのも面白そうです。
ただ、ここまで凝ったレイアウトをしたいなら、きっと私ならフレームに逃げるだろうなぁとは思います。または、このレイアウトじゃなくてもいいように、内容を工夫するとか。
何だかスレッドとは関係ない話になってしまいました。
この辺りで失礼いたします。
-
5 名前： 匿名 ： 2006/11/30（木） 14:18 ID:d0QfguZa
- ヘッダー
メニュー コンテンツ
フッター
ｃｓｓ疑似フレームでできると思います。コンテンツ以外は、overflow:hidden;すればバーは出ないです。
えーっと、
htmlと同じ大きさのコンテンツをつくり、htmlは基準点になってもらいます。これを土台にしてその上にz-indexでヘッダー・メニュー・フッターを乗っければ、その3つは固定で、コンテンツは余りという形の可変疑似レイアウトができると思います。
-
6 名前： K+S ： 2006/11/30（木） 14:18 ID:nROqylMa
- コメントありがとうございます。
仰る通り構造的にはフレームが最適と考えられます。
HTML+CSSの疑似フレームを考慮した場合でもJavaScriptを用いて高さを算出すれば実現できるのですが、
ウィンドウ幅算出のためにJavaScriptを利用するという影響が生じてしまいます。
1年ほど前にも考察したのですが、その際はハイブリッドデザインに逃げました。
強いて言えば逆ハイブリッドデザインかもしれません。
html , body {height:100%; overflow:hidden}
ヘッダー部 height:100px
コンテンツ部 height:75%; overflow:auto
フッター部 height:auto; overflow:hidden
というような指定も考えたのですが、もう少し妥当な方法がないかと試行錯誤しておりました。
この指定ではウィンドウの縦表示領域（高さ）が400px程度〜1000px程度までであればコンテンツ部が75%確保され、
表示領域（100%の高さ）から75%とヘッダー部の高さを差し引いた残りの高さがフッター部にあたり、それなりに表示できます。
フッター部に適当な背景画像を指定すれば見栄えも気にならない気がします（主観ですが）。
もう少し考察してみたいと思います。
>>5
スクロールバーの表示領域はどのように確保されるのでしょうか？
フレームで組んだように、コンテンツ部（メニュー部）に収まるような指定はCSSのみで実現できないように思います。
(100% - *px)といった形で高さを指定できませんよね。
position:absolute; top:0; bottom:0 のような指定で上端と下端の表示領域の確保が実現できれば面白いのですが(^^;
-
7 名前： 匿名 ： 2006/11/30（木） 14:18 ID:d0QfguZa
- 5です
position:absolute; top:0; bottom:0のような指定できます
上はtop:0;で別ボックスでbottom:100px;等とすれば、z-indexで一番上に、メニュー部分がheight:100%;でz-index真中、コンテンツが一番下。ダブっている所は、上に消されるけど、問題ないと思うんですけど。コンテンツ部にheight:75%;ではなく100%にすれば、ヘッダとフッダが上に乗っている分勝手に消される。スクロールバーも全体に出る。
勘違いしてます？
-
8 名前： アヤ ： 2006/11/30（木） 14:18 ID:I/L72zbC
- >>6
>ウィンドウ幅算出のためにJavaScriptを利用するという影響が生じてしまいます。
これは、JSを有効にしていないといけないため、あまり使えない技だなぁと考えています。
自サイトへの訪問者のJS無効の割合が、意外に高いせいでJSは私にとって、鬼門です。
>html , body {height:100%; overflow:hidden} 〜
なるほど、ヘッダーのみ固定で、中段を%で可変、フッターは余り分を使用ですか。
上段固定、中段＆下段可変って感じでしょうか。
フッターが可変になりますから、情報もコピーライトくらいしか置けなさそうな気もしますが（といっても、元々フッターには情報はあまり置きませんが）、形はきれいに収まりますね。
>position:absolute; top:0; bottom:0 のような指定で上端と下端の表示領域の確保が実現できれば面白いのですが(^^;
上段に100px、下段に50pxのヘッダー&フッターを置いたとして、可変の中段ボックスの大きさをposition:absolute; top:100px; bottom:50px;みたいに指定して、bottomが表示領域（または親要素）の下辺を始点に、上方向に50pxの位置へくるというような指定ができれば、怖いものなしだなぁと思ってしまいました。
>>5 >>7
これはメニューにはスクロールバーが出ない場合のみ有効と考えていいでしょうか？
メニュー部にスクロールバーが出現した場合、上に重ねたヘッダー&フッターに隠れてしまうようなのですが。
