![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
テキストボックスの高さを可変とし、ある高さ以上でスクロールバーを出したい
以下のように
________
|コメント。 |
| |
----------------
↓
________
|コメント。 |
|コメント。 |
|コメント。 |
|コメント。 |
|コメント。 |
|コメント。 |
----------------
↓
________
|コメント。 ∥
|コメント。 ∥
|コメント。 ∥
|コメント。 ∥
|コメント。 ∥
|コメント。 ∥
----------------
∥スクロールバー
cssの{overflow: auto;}
でスクロール可視の自動設定はできますが、この
ばあい高さが固定されてしまいます。高さを設定しないと、
外枠に設定した高さ=この枠の高さとなってしまいます。
そうではなく、ミニマムの高さ、マックスの高さを設定してスクロールバーを
自動表示させるようにするにはなにか方法はないでしょうか?
お知恵をお貸しください。よろしくお願いします。
![](http://oshiete.xgoo.jp/images/v2/common/profile/M/noimageicon_setting_04.png?e8efa67)
No.1ベストアンサー
- 回答日時:
<div style="border:5px #000000 double;width:150px;min-height:50px;max-height:100px;overflow:auto;">
1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />
</div>
↑こういう事でしょうか?
内容が50px未満の場合(1~3行目まで)はボックスの高さを50pxとし、
内容が50px以上100px未満の場合(4~6行目まで)は内容に合わせてボックスが可変し、
それ以降はボックスの高さが100pxで固定となりスクロールバーが出ます。
横幅の場合も同様に、min-width,max-widthと指定します。
ただ、この方法はFirefox,Netscape,Opera,Safariなどは対応していますが、IEは対応していないので、IEで同様の表示をする場合はHTML+CSSだけではできないかと思います。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
css初心者 フレックスボックス...
-
widthやheightの数値に単位(px...
-
CSSがなぜかfont-sizeだけ効か...
-
【スタイルシート?】同行内で...
-
テキストボックスの高さを可変...
-
レスポンシブコードの意味なの...
-
safariだけ、cssが効きません!
-
CSSでborderの指定を解除する記...
-
背景が下まで表示されないんです。
-
CSS(0の単位)について
-
【HTML&CSS】フッター下部の余...
-
form input テキストを上下中央...
-
指定したborderの一部が表示さ...
-
定義リストに下線をつけたいと...
-
CSSでボックスのheightが0になる
-
ブロック要素のボーダーについ...
-
ページ内リンクがずれてしまう
-
CSS:animation開始位置の設定
-
divで囲まれたpaddingの指定を...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
画像イメージの上下左右、欲し...
-
css初心者 フレックスボックス...
-
form input テキストを上下中央...
-
CSSでボックスのheightが0になる
-
CSS、width100%でもできる余白
-
CSSがなぜかfont-sizeだけ効か...
-
footer を横幅いっぱいに広げる...
-
CSS:animation開始位置の設定
-
【CSS】ヘッダーの高さが不明の...
-
CSSで背景画像を一番下にもって...
-
W3Cのソースコードの検証サービ...
-
表示倍率を変えるとレイアウト...
-
<div>と<div>の間の10px程の...
-
HTMLのiframeの入れ子について
-
余分な縦スクロールバーが出て...
-
HTMLで一部だけスクロールする...
-
【HTML&CSS】フッター下部の余...
-
Media Queries 4 で 非推奨とな...
おすすめ情報