CSSテクニックコミュの高さの指定

はじめまして。
背景BGをCSSなどで指定してあるレイアウトデザインで
ブラウザの高さより少量のテキスト量の場合、そのテキスト量の分しか表示されませんよね？そういったときのheightの指定はどうされてますでしょうか？100%もautoも反応わるくて、しょうがないから、1000pxとか指定してしまってます。。
もしくは、そういった背景画像を無理やり容易して貼り付けてます。だから、テキスト量が少ないページもちょっぴりスクロールします。。。

理想は、やっぱり画像なんかではなく、background-colorで指定したいのです。

皆さんはたとえばそういうときどうされてるのかなと思いトピ作成してみました。

コメント(10)

最初
全て
最新の40件

[1] mixiユーザー 03月21日 13:22

marginとかpaddingで調整しますねぇ。
文字の大きさを可読範囲で色々変えてみて、画像が全部表示されてバランスの取れる値を入れてます。
IEのことを考えなければ min-height でいいんですけどね。

スクロールバーは、overflow:hidden とかじゃ消えませんか？

[2] mixiユーザー 03月21日 18:18

body の background に色つき画像を repeat-y ではダメですか？
テキスト量にかかわらず、高さ全てに色が塗れますよ。

[3] mixiユーザー 03月21日 19:28

書き込みありがとうございます。
>mimizqさん
やっぱりバランスのよい値をいれてるんですね。
でも、min-height これを駆使して、IE以外のブラウザサポートしてみます。スクロールバーは、ページによっては必要な箇所も出てくるので。。。

>マッツさん
今は泣く泣くそうなってる感じです。repeat-yでは済まないような複雑な背景の時、800x1000とかの画像をBGにするのも気が引けるんで、何かないかなと思って。。。

[4] mixiユーザー 03月24日 04:08

もうこのトピは終わりかな？
やりたいことがきちんとはわからなかったのだけど、とりあえずこういうことかなーって。

http://www.officel.biz/test/minheight.htm

ハックしたり専用スタイルを用意しないでいいだけ楽だと思うんだけど。。。

win IE6 と NN7 で動作確認しています。
その他の環境でのテスト報告キボンｗ

あと、１点教えて欲しいのですが、

＞IEのことを考えなければ min-height でいいんですけどね。

これは、ＩＥではtr,td,th以外では、min-heightが効かないってだけでいいんでしょうか。
なにか他にもっと重要な問題があるとかではなくて？
効かないってこと以外に問題があるようなら教えてください。m(_._)m

[5] mixiユーザー 03月24日 04:09

ソース貼り付けだとうざいので書き直しましたm(_._)m

[7] mixiユーザー 03月24日 14:35

こんな記事見つけました。
http://www.yoseyama.jp/mt/archives/2005/03/iecss.html

> cssでmin-heightの指定はIEにききません。
> 単純にheightを入れればIEで同じ効果をえられます。
> しかし、それではIE以外のブラウザに影響がでてしまう。
> IEだけにheighの指示を入れたい場合。
> cssの一番下の行に* html hogehoge {heigh: hogehoge}で
> 対応することができます。
> （この指定の後はIEしか認識しないようです。）

＞らきさん

そもそも自分は tr,td,th に min-height を指定しようと思ったことがないので、IEでそれらが効くのは初めて知りました。
http://www6.plala.or.jp/go_west/nextcss/ref/prp/wd_n_hi/hgt_min.htm
上記のページを見ると「表関連要素以外」とあるんですが、効いてしまうのはIEのバグでしょうか？それとも私が何か誤解しているんだろうか。

[8] mixiユーザー 03月24日 16:11

＞mimizqさん

非常に古いっぽいネタであれですが、tr,th,tdに、ＩＥ６が対応しているというのは、MSDN

http://www.microsoft.com/japan/msdn/ie/ie60/cssenhancements.asp

で見つけました。この先のリンクのサンプル

http://msdn.microsoft.com/workshop/samples/author/dhtml/refs/minheight.htm

で、使えていることが確認できます。（すっげ微妙でわかりにくいサンプルですがｗ）

＞上記のページを見ると「表関連要素以外」とあるんですが、効いてしまうのはIEのバグでしょうか？それとも私が何か誤解しているんだろうか

については、ＲＦＣとかひっくり返して確認してみないとなんとも。。。
俺も自分で確認したわけではないので、どれが正確なのかは調べてみないとわからないです。週末にでもがんばって確認してみます。

ただ、MSDNには、こんなコラムがあって、

http://www.microsoft.com/japan/msdn/columns/default.asp

その中に、Internet Explorer 6 と標準

http://www.microsoft.com/japan/msdn/columns/dude/dude03262001.asp

ていう風に書いてあるので、（断定できませんが）ＩＥのほうが標準と異なっている、のかもしれないなー、とは思っています。

[9] mixiユーザー 03月24日 16:58

調べましたｗ

原文の
http://www.w3.org/TR/REC-CSS2/visudet.html#min-max-heights

all elements except non-replaced inline elements and table elements

は、”非置換要素及び表要素を除くすべての要素”と訳されるので、ＩＥの解釈が標準と異なっているのかな、と思いますた。

[10] mixiユーザー 03月24日 21:31

わざわざ調べて下さりありがとうございます。
テーブルレイアウト以外で min-height の必要性あんまり感じないですしね。

ログインすると、みんなのコメントがもっと見れるよ