テキストボックスの高さを可変とし、ある高さ以上でスクロールバーを出したい
以下のように
________
|コメント。 |
| |
----------------
↓
________
|コメント。 |
|コメント。 |
|コメント。 |
|コメント。 |
|コメント。 |
|コメント。 |
----------------
↓
________
|コメント。 ∥
|コメント。 ∥
|コメント。 ∥
|コメント。 ∥
|コメント。 ∥
|コメント。 ∥
----------------
∥スクロールバー
cssの{overflow: auto;}
でスクロール可視の自動設定はできますが、この
ばあい高さが固定されてしまいます。高さを設定しないと、
外枠に設定した高さ=この枠の高さとなってしまいます。
そうではなく、ミニマムの高さ、マックスの高さを設定してスクロールバーを
自動表示させるようにするにはなにか方法はないでしょうか?
お知恵をお貸しください。よろしくお願いします。
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で質問しましょう!
似たような質問が見つかりました
- YouTube YouTubeのコメントについて。 普通だったら高評価とか低評価とかのボタンの下からコメントが見れま 3 2022/08/19 23:30
- YouTube YouTubeコメント。 1 2022/04/23 09:43
- Excel(エクセル) セルに設定した[コメント]、表示のON/OFFは正常なるも印刷されない! 3 2022/09/18 21:56
- YouTube YouTube動画。 1 2022/04/15 17:56
- その他(SNS・コミュニケーションサービス) ヤフーのニュースにコメントしようとしたら下記のメッセージが出て来てコメントできません 1 2022/12/03 17:34
- YouTube YouTube動画へのコメント投稿で「いいね」が低評価 YouTube動画(主に政治経済関連)によく 1 2022/10/31 16:55
- その他(ブログ) 最近コメント欄について 4 2023/05/14 09:08
- livedoor Blog(ライブドアブログ) livedoorブログのコメント欄を個々の記事ごとに表示したいのですが。 1 2022/08/30 18:49
- YouTube YouTube、高評価、低評価。 2 2022/07/21 13:19
- その他(IT・Webサービス) ユーチューブ動画への質問の仕方 1 2023/05/24 15:55
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
画像イメージの上下左右、欲し...
-
CSSでボックスのheightが0になる
-
プルダウンで長い名前の選択肢...
-
【HTML&CSS】フッター下部の余...
-
【HTML】【CSS】【Swiper】 元...
-
float を使うと隙間ができる
-
<li>の黒い点を消したい。
-
CSS テキストフィールドの文字...
-
テーブル内の画像をマウスオー...
-
CSS、width100%でもできる余白
-
古いIEでレイアウト崩れます。
-
marginとナビゲーションの位置...
-
CSSのposition値の上書き(打消...
-
IEとFireFoxでの指定位置のズレ...
-
CSSの角丸での質問です。 今、C...
-
HTMLのiframeの入れ子について
-
DIVの入り子のwidthの指定方法
-
css初心者 フレックスボックス...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
画像イメージの上下左右、欲し...
-
css初心者 フレックスボックス...
-
CSSでボックスのheightが0になる
-
CSS、width100%でもできる余白
-
CSS:animation開始位置の設定
-
スクロールボックスを中央に配...
-
form input テキストを上下中央...
-
表示倍率を変えるとレイアウト...
-
W3Cのソースコードの検証サービ...
-
<div>と<div>の間の10px程の...
-
CSSで背景画像を一番下にもって...
-
CSSがなぜかfont-sizeだけ効か...
-
table周辺の隙間をなくしたい。
-
footer を横幅いっぱいに広げる...
-
【CSS】ヘッダーの高さが不明の...
-
CSS3で角丸写真にシャドーを付...
-
定義リストに下線をつけたいと...
-
Media Queries 4 で 非推奨とな...
おすすめ情報