dポイントプレゼントキャンペーン実施中！

CSS　サイト全体の高さ指定

解決済

  • 質問者：takeetakee
  • 質問日時：
  • 回答数：5件

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

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (5件)

No.4ベストアンサー

  • 回答者： abril
  • 回答日時：

> 極端にコンテンツの少ないページが数ページあります。

そうすると、放っておけばぺったんこになってしまうわけです。
（省略）
> ヘッダー＋縦２段組＋フッターというブロック構造のサイトです。

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

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

ANo.3の回答者様の方法も有りなのですが、この場合、コンテンツ量が定義されたheightより多い場合はそのはみ出したコンテナブロックに対しスクロールバーが表示されます。質問者様のニーズを満たすのに最も相応しい方法をお選び下さい。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ANo.2様の方法が良いということで、フォローして頂きありがとうございます。いつも大変お世話になります。

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

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

通報する
お礼日時：2008/04/04 05:24

No.5

  • 回答者： abril
  • 回答日時：

すみません、訂正です。

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

この回答への補足

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

補足日時：2008/04/04 13:19
通報する
    • good
    • 0
    • 件
通報する

No.3

  • 回答者： sun_wil_19
  • 回答日時：

　段組みの部分のheightを指定して、overflowをautoに指定して、


すべてのページの高さを統一するのはどうでしょうか。
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

通報する
お礼日時：2008/04/04 05:27

No.2

  • 回答者： steel_gray
  • 回答日時：

縦２段組のあたりにmin-heightを指定しては？


IE7及び、その他のメジャーブラウザで効きます。
（IE6では効きません。）
http://www.y-adagio.com/public/standards/tr_css2 …

IE6もフォローしたいのならCSSハックやJavascriptとか使う事になります。
http://www.google.com/search?q=min-height

この回答への補足

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

補足日時：2008/04/04 05:12
通報する
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： 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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

通報する
お礼日時：2008/04/04 05:11

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報