ようこそ ゲスト さん、新規登録(無料)して気になる疑問を解決しませんか?

質問

質問者:takeetakee CSS サイト全体の高さ指定
困り度:
  • 困っています
サイトの高さはコンテンツの量で決まってくると思うので、
普段あまり気にして指定はしませんが、
今制作しているページは、極端にコンテンツの少ないページが
数ページあります。そうすると、放っておけばぺったんこになってしまうわけです。
高さ指定はどこで記述するのがよいのでしょうか?
ヘッダー+縦2段組+フッターというブロック構造のサイトです。
質問投稿日時:08/04/03 12:31
質問番号:3918421
この質問に対する回答は締め切られました。
最新から表示回答順に表示良回答のみ表示

回答

 

回答者:abril すみません、訂正です。デザインによっては「縦2段組」コンテナブロックそれぞれにmin-heightとIE6専用heightを定義しておいた方がベターかも、です。言葉足らずで失礼しました。
種類:アドバイス
どんな人:専門家
自信:参考意見
回答日時:08/04/03 13:53
回答番号:No.5
この回答への補足お陰さまで上手く設置できました。本当にありがとうございます。全体に指定するとフッターがずれました。2段組ブロック内それぞれ指定で上手くできました。
IE6でheight定義で効果があるのなら、全てheight定義で良いと思ってしまうのですが、これからはmin-heightに統一されるのでしょうか。
この回答へのお礼この回答にお礼をつける(質問者のみ)

回答

良回答20pt

回答者:abril > 極端にコンテンツの少ないページが数ページあります。そうすると、放っておけばぺったんこになってしまうわけです。
(省略)
> ヘッダー+縦2段組+フッターというブロック構造のサイトです。

上記から推測すると、ウィンドウ・サイズ自体を制御(少ないコンテンツの場合、フッターの下に余白ができるのみ)したいわけではなく、メインの「縦2段組」のコンテナブロックに対して、中のデータ量を問わず最低限の高さを維持させておきたい、というご希望で宜しいでしょうか?
であればANo.2の回答者様の仰る方法が手軽だと思います。

多分、「縦2段組」を括る直接の親のコンテナブロック(よくあるネーミングだと#wrapperとか、そんな感じの)が存在しているかと思われますが、それに対して高さの最低値をmin-heightで定義した上で、更にIE6用にアンダースコア・ハックなどで同じ値をheightで指定しておけば、IE6ではheightで指定した値より実際のコンテンツ量が多くなった場合は勝手にボックスの高さを伸ばしてくれる(しまう)為、はみ出す事はありません。

ANo.3の回答者様の方法も有りなのですが、この場合、コンテンツ量が定義されたheightより多い場合はそのはみ出したコンテナブロックに対しスクロールバーが表示されます。質問者様のニーズを満たすのに最も相応しい方法をお選び下さい。
種類:アドバイス
どんな人:専門家
自信:参考意見
回答日時:08/04/03 13:48
回答番号:No.4
この回答へのお礼ANo.2様の方法が良いということで、フォローして頂きありがとうございます。いつも大変お世話になります。

初めてのアンダースコア・ハック。
ブラウザ表示の違いに気がついて、めげ出していたところですが、
こうした対応を学ぶのもおもしろそうです。

実は、ボーダー、マージンなどを計算して横幅を合わせたはずの
ボックスが、IEではバラバラになっていることがわかり
落ち込んだところでしたが、
アンダースコアハックでがんばってみようと思います。
どうもありがとうございました。

回答

 

回答者:sun_wil_19  段組みの部分のheightを指定して、overflowをautoに指定して、
すべてのページの高さを統一するのはどうでしょうか。
種類:回答
どんな人:経験者
自信:参考意見
回答日時:08/04/03 13:21
回答番号:No.3
この回答へのお礼そのような方法があるとは知りませんでした。
小さなスクロール記事などにも利用できそうですね。
どうもありがとうございました。

回答

良回答10pt

回答者:steel_gray 縦2段組のあたりにmin-heightを指定しては?
IE7及び、その他のメジャーブラウザで効きます。
(IE6では効きません。)
http://www.y-adagio.com/public/standards/tr_css2/visudet.html#min-m...

IE6もフォローしたいのならCSSハックやJavascriptとか使う事になります。
http://www.google.com/search?q=min-height
種類:アドバイス
どんな人:一般人
自信:参考意見
回答日時:08/04/03 13:05
回答番号:No.2
この回答への補足min-height、初めて使用するプロパティです。
一応適当につっこんでみたところ、Fire Foxで上手表示されました。
ちょうど、ブラウザ対応についても悩みはじめでしたので、
cssハックも同時にトライしてみようかと思います。
どうもありがとうございました。
この回答へのお礼この回答にお礼をつける(質問者のみ)

回答

 

回答者:auty <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>
種類:アドバイス
どんな人:経験者
自信:参考意見
回答日時:08/04/03 12:39
回答番号:No.1
この回答へのお礼ウィンドウリサイズですよね。
ご親切に記述ありがとうございました。
質問が雑だったのもあり、必要なものではありませんでしたが、
利用させて頂くこともあるかと思います。どうもありがとうございました。
最新から表示回答順に表示良回答のみ表示