• ベストアンサー

CSS サイト全体の高さ指定

サイトの高さはコンテンツの量で決まってくると思うので、 普段あまり気にして指定はしませんが、 今制作しているページは、極端にコンテンツの少ないページが 数ページあります。そうすると、放っておけばぺったんこになってしまうわけです。 高さ指定はどこで記述するのがよいのでしょうか? ヘッダー+縦2段組+フッターというブロック構造のサイトです。

質問者が選んだベストアンサー

  • ベストアンサー
  • abril
  • ベストアンサー率69% (388/560)
回答No.4

> 極端にコンテンツの少ないページが数ページあります。そうすると、放っておけばぺったんこになってしまうわけです。 (省略) > ヘッダー+縦2段組+フッターというブロック構造のサイトです。 上記から推測すると、ウィンドウ・サイズ自体を制御(少ないコンテンツの場合、フッターの下に余白ができるのみ)したいわけではなく、メインの「縦2段組」のコンテナブロックに対して、中のデータ量を問わず最低限の高さを維持させておきたい、というご希望で宜しいでしょうか? であればANo.2の回答者様の仰る方法が手軽だと思います。 多分、「縦2段組」を括る直接の親のコンテナブロック(よくあるネーミングだと#wrapperとか、そんな感じの)が存在しているかと思われますが、それに対して高さの最低値をmin-heightで定義した上で、更にIE6用にアンダースコア・ハックなどで同じ値をheightで指定しておけば、IE6ではheightで指定した値より実際のコンテンツ量が多くなった場合は勝手にボックスの高さを伸ばしてくれる(しまう)為、はみ出す事はありません。 ANo.3の回答者様の方法も有りなのですが、この場合、コンテンツ量が定義されたheightより多い場合はそのはみ出したコンテナブロックに対しスクロールバーが表示されます。質問者様のニーズを満たすのに最も相応しい方法をお選び下さい。

takeetakee
質問者

お礼

ANo.2様の方法が良いということで、フォローして頂きありがとうございます。いつも大変お世話になります。 初めてのアンダースコア・ハック。 ブラウザ表示の違いに気がついて、めげ出していたところですが、 こうした対応を学ぶのもおもしろそうです。 実は、ボーダー、マージンなどを計算して横幅を合わせたはずの ボックスが、IEではバラバラになっていることがわかり 落ち込んだところでしたが、 アンダースコアハックでがんばってみようと思います。 どうもありがとうございました。

その他の回答 (4)

  • abril
  • ベストアンサー率69% (388/560)
回答No.5

すみません、訂正です。デザインによっては「縦2段組」コンテナブロックそれぞれにmin-heightとIE6専用heightを定義しておいた方がベターかも、です。言葉足らずで失礼しました。

takeetakee
質問者

補足

お陰さまで上手く設置できました。本当にありがとうございます。全体に指定するとフッターがずれました。2段組ブロック内それぞれ指定で上手くできました。 IE6でheight定義で効果があるのなら、全てheight定義で良いと思ってしまうのですが、これからはmin-heightに統一されるのでしょうか。

noname#248942
noname#248942
回答No.3

 段組みの部分のheightを指定して、overflowをautoに指定して、 すべてのページの高さを統一するのはどうでしょうか。

takeetakee
質問者

お礼

そのような方法があるとは知りませんでした。 小さなスクロール記事などにも利用できそうですね。 どうもありがとうございました。

  • steel_gray
  • ベストアンサー率66% (1052/1578)
回答No.2

縦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

takeetakee
質問者

補足

min-height、初めて使用するプロパティです。 一応適当につっこんでみたところ、Fire Foxで上手表示されました。 ちょうど、ブラウザ対応についても悩みはじめでしたので、 cssハックも同時にトライしてみようかと思います。 どうもありがとうございました。

  • auty
  • ベストアンサー率58% (284/486)
回答No.1

<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>

takeetakee
質問者

お礼

ウィンドウリサイズですよね。 ご親切に記述ありがとうございました。 質問が雑だったのもあり、必要なものではありませんでしたが、 利用させて頂くこともあるかと思います。どうもありがとうございました。

関連するQ&A