- ベストアンサー
CSS サイト全体の高さ指定
サイトの高さはコンテンツの量で決まってくると思うので、 普段あまり気にして指定はしませんが、 今制作しているページは、極端にコンテンツの少ないページが 数ページあります。そうすると、放っておけばぺったんこになってしまうわけです。 高さ指定はどこで記述するのがよいのでしょうか? ヘッダー+縦2段組+フッターというブロック構造のサイトです。
- みんなの回答 (5)
- 専門家の回答
質問者が選んだベストアンサー
> 極端にコンテンツの少ないページが数ページあります。そうすると、放っておけばぺったんこになってしまうわけです。 (省略) > ヘッダー+縦2段組+フッターというブロック構造のサイトです。 上記から推測すると、ウィンドウ・サイズ自体を制御(少ないコンテンツの場合、フッターの下に余白ができるのみ)したいわけではなく、メインの「縦2段組」のコンテナブロックに対して、中のデータ量を問わず最低限の高さを維持させておきたい、というご希望で宜しいでしょうか? であればANo.2の回答者様の仰る方法が手軽だと思います。 多分、「縦2段組」を括る直接の親のコンテナブロック(よくあるネーミングだと#wrapperとか、そんな感じの)が存在しているかと思われますが、それに対して高さの最低値をmin-heightで定義した上で、更にIE6用にアンダースコア・ハックなどで同じ値をheightで指定しておけば、IE6ではheightで指定した値より実際のコンテンツ量が多くなった場合は勝手にボックスの高さを伸ばしてくれる(しまう)為、はみ出す事はありません。 ANo.3の回答者様の方法も有りなのですが、この場合、コンテンツ量が定義されたheightより多い場合はそのはみ出したコンテナブロックに対しスクロールバーが表示されます。質問者様のニーズを満たすのに最も相応しい方法をお選び下さい。
その他の回答 (4)
- abril
- ベストアンサー率69% (388/560)
すみません、訂正です。デザインによっては「縦2段組」コンテナブロックそれぞれにmin-heightとIE6専用heightを定義しておいた方がベターかも、です。言葉足らずで失礼しました。
補足
お陰さまで上手く設置できました。本当にありがとうございます。全体に指定するとフッターがずれました。2段組ブロック内それぞれ指定で上手くできました。 IE6でheight定義で効果があるのなら、全てheight定義で良いと思ってしまうのですが、これからはmin-heightに統一されるのでしょうか。
段組みの部分のheightを指定して、overflowをautoに指定して、 すべてのページの高さを統一するのはどうでしょうか。
お礼
そのような方法があるとは知りませんでした。 小さなスクロール記事などにも利用できそうですね。 どうもありがとうございました。
- steel_gray
- ベストアンサー率66% (1052/1578)
縦2段組のあたりにmin-heightを指定しては? IE7及び、その他のメジャーブラウザで効きます。 (IE6では効きません。) http://www.y-adagio.com/public/standards/tr_css2/visudet.html#min-max-heights IE6もフォローしたいのならCSSハックやJavascriptとか使う事になります。 http://www.google.com/search?q=min-height
補足
min-height、初めて使用するプロパティです。 一応適当につっこんでみたところ、Fire Foxで上手表示されました。 ちょうど、ブラウザ対応についても悩みはじめでしたので、 cssハックも同時にトライしてみようかと思います。 どうもありがとうございました。
- auty
- ベストアンサー率58% (284/486)
<head></head>の中に入れて調整してみてください。 <script language="javascript"> <!-- var winWidth = 800; var winHeight= 600; if( window.resizeTo ){ window.resizeTo(winWidth, winHeight); } else if( window.outerWidth ){ window.outerWidth = winWidth; window.outerHeight = winHeight; } //--> </script>
お礼
ウィンドウリサイズですよね。 ご親切に記述ありがとうございました。 質問が雑だったのもあり、必要なものではありませんでしたが、 利用させて頂くこともあるかと思います。どうもありがとうございました。
お礼
ANo.2様の方法が良いということで、フォローして頂きありがとうございます。いつも大変お世話になります。 初めてのアンダースコア・ハック。 ブラウザ表示の違いに気がついて、めげ出していたところですが、 こうした対応を学ぶのもおもしろそうです。 実は、ボーダー、マージンなどを計算して横幅を合わせたはずの ボックスが、IEではバラバラになっていることがわかり 落ち込んだところでしたが、 アンダースコアハックでがんばってみようと思います。 どうもありがとうございました。