スタイルシートで div の高さなどを height: 450px; とか auto とかできますが、これを400の高さまでは auto にして自動的に高さが変更されるようにし、 400 以上の高さは越えないようにしたいのですが、方法があるでしょうか?

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2005/06/01 20:43:26
  • 終了:--

回答(6件)

id:Mars No.1

Mars回答回数203ベストアンサー獲得回数202005/06/01 21:28:16

ポイント20pt

http://www.htmq.com/style/max-height.shtml

max-height−スタイルシートリファレンス

cssにはmax-heightというプロパティがあるのでこれを指定すると最大値を制限できます。


<html>

<head>

<title></title>

<style type=”text/css”>

div {

max-height:100px;

border:1px solid #666;

overflow:auto;

}

</style>

</head>

<body>


<div>

a

a

a

a

a

a

a

a

a

a

a

a


</div>


<div>a

a</div>

</body>

</html>


ただし、リンク先にあるようにこれはIEではサポートされていません。


IEでも動く妥協策としては

height:400px;overflow:auto;にすると常に400pxになりますが、それを超えた場合はスクロールバーが出るようになります。

id:koh40

どうもありがとうございます。

が、

IEではサポートされていないんですね (+_+)

2005/06/02 09:44:13
id:gdm No.2

gdm回答回数58ベストアンサー獲得回数02005/06/01 21:35:06

ポイント20pt

http://www.hatena.ne.jp/1117626206

人力検索はてな - スタイルシートで div の高さなどを height: 450px; とか auto とかできますが、これを400の高さまでは auto にして自動的に高さが変更されるようにし、 400 以上..

URLはダミーです


div

{

height:auto;

max-height:400px;

overflow:auto;

}


最新版のNNとOperaなら動きます。IEは未対応ですけど・・

id:koh40

どうもありがとうございます。

こちらもですね・・・

2005/06/02 09:45:18
id:hichii No.3

hichii回答回数446ベストアンサー獲得回数02005/06/01 21:35:48

ポイント20pt

http://www.tagindex.com/stylesheet/box/max_height.html

スタイルシート[CSS]/ボックス/ボックスの最大の高さと最小の高さを指定する - TAG index

二つとも同じですが、これをしたいという意味でいいのでしょうか・・・

http://www.parkcity.ne.jp/~chaichan/src/cssbox.htm

このサイトは移動しました

id:koh40

どうもありがとうございます。

IEで使いたいのですが・・・

2005/06/02 09:46:57
id:ymgh No.4

ymgh回答回数43ベストアンサー獲得回数02005/06/01 22:40:37

ポイント40pt

URL ダミーです


 テーブル(サイズ0)をダブルで使い、外側のテーブルを400にして、内側のフレームをautoにする。

 内容は内側の中に書き入れる。


 で、趣旨と合ってますか ?

 あっ、これだと、書き込み量が多いと400超えますね。ケースにより、スクロールを埋め込むんでしょうか ?

id:koh40

これは可能性ありそうですね、

ちょっと試してみたんですが、うまくいかないです。

書き方がよく分かりません。

スクロールを埋め込むんですが、

2005/06/02 09:54:53
id:starflower No.5

starflower回答回数11ベストアンサー獲得回数02005/06/01 23:15:25

ポイント20pt

http://www.tohoho-web.com/css/reference.htm#max-height

とほほのスタイルシート入門

「max-height」という指定がちょうどご希望のものかと思います。が、残念ながらIEは対応してないみたいです。

id:koh40

どうもありがとうございました・・・

2005/06/02 09:55:12
id:amanoftaste No.6

amanoftaste回答回数42ベストアンサー獲得回数02005/06/04 12:45:37

ポイント40pt

http://www.tohoho-web.com/css/reference.htm#overflow

とほほのスタイルシート入門

<div style=”height:400px;overflow:auto;”>

<div style=”border:red 1px solid;”>

text

end

</div>

</div>


4番さんのでやるとこういう感じですか。

「overflow:hidden;」のほうが良いですかね?

id:koh40

どうもありがとうございます。

なんとかやってみます。

2005/06/04 17:00:09

コメントはまだありません

この質問への反応(ブックマークコメント)

トラックバック

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません