質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

3回答

1229閲覧

html、cssにてコメントの量に応じて要素の縦幅を増やす方法

ko_no

総合スコア16

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/06/16 08:36

前提・実現したいこと

当方railsにてチャットアプリを作成しております。(簡素なラインのメッセージ画面を想定しております)
現在、メイン画面のメッセージ表示部分をマークアップ中です。
そこでメッセージの量に応じてメッセージの縦幅を広くする方法が分からず、以下のような大量の文章を打つとメッセージの下に配置してあるユーザーネームや投稿日時に文字が被ってしまいます。
文字量に応じて要素を縦に広げる方法をご存知の方がいらっしゃいましたらご教授いただけると幸いですm(_ _)m

###htmlコード,index.html.erb

html

1 <div class="Main__right__message"> 2 <div class="Main__right__message__block"> 3 <div class="Main__right__message__block-text">サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト</div> 4 <div class="Main__right__message__block-info"> 5 <div class="Main__right__message__block-info-name">太郎</div> 6 <div class="Main__right__message__block-info-time">2020/06/01 12:45</div> 7 </div> 8 </div> 9 <div class="Main__right__message__block"> 10 <div class="Main__right__message__block-text">メッセージ</div> 11 <div class="Main__right__message__block-info"> 12 <div class="Main__right__message__block-info-name">次郎</div> 13 <div class="Main__right__message__block-info-time">2020/06/01 11:45</div> 14 </div> 15 </div> 16 </div>

###cssコード,index.scss

css

1 &__message{ 2 height: 90%; 3 &__block{ 4 height: 15%; 5 margin: 5px 5px 10px 5px; 6 position: relative; 7 &-text{ 8 margin: 5px; 9 font-size: 20px; 10 display: inline; 11 } 12 &-info{ 13 display: flex; 14 position: absolute; 15 bottom: 0px; 16 margin: 5px; 17 color: rgb(146, 145, 145); 18 &-name{ 19 20 } 21 &-time{ 22 margin-left: 20px; 23 } 24 } 25 } 26 } 27

試したこと

min-heightでデフォルトの高さを決め、height:auto;も記述しておけば、という記事を発見し実行したのですが上手くいきませんでした、、、

イメージ説明

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

ベストアンサー

absoluteをやめればいいかと思います。

css

1.Main__right__message__block-info { 2 display: flex; 3 /* position: absolute; */ 4 bottom: 0px; 5 margin: 5px; 6 color: #929191; 7}

投稿2020/06/16 08:44

Lhankor_Mhy

総合スコア35865

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ko_no

2020/06/16 08:58

コメントをいただいたお二方のポイントを直したところ上手くいきました!! (absoluteを削除し、height:auto;を設定する) 本当にありがとうございました!!
guest

0

&__blockheightを決めなければ(デフォルト時のauto値)いけます。

投稿2020/06/16 08:41

編集2020/06/16 08:42
miyabi_takatsuk

総合スコア9528

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ko_no

2020/06/16 08:58

コメントをいただいたお二方のポイントを直したところ上手くいきました!! (absoluteを削除し、height:auto;を設定する) 本当にありがとうございました!!
guest

0

min-heightでデフォルトの高さを決め、height:auto;も記述しておけば、という記事を発見し実行したのですが上手くいきませんでした、、、

上記の内容と画像から、推測すると、下記のようなことがしたいのかな?

scss

1.Main__right__message { 2 height: 90%; 3 &__block{ 4 height: auto; /* 高さ自動 */ 5 min-height: 60px; /* 最小高さ */ 6 padding-bottom: 30px; /* 名前と日付の行の高さを確保 */ 7 margin: 5px 5px 10px 5px; 8 position: relative; 9 &-text{ 10 margin: 5px; 11 font-size: 20px; 12 display: inline; 13 } 14 &-info{ 15 display: flex; 16 position: absolute; 17 bottom: 0px; 18 margin: 5px; 19 color: rgb(146, 145, 145); 20 &-name{ 21 22 } 23 &-time{ 24 margin-left: 20px; 25 } 26 } 27 } 28 }

padding-bottom を設定することで、absolute での重なりを回避。

投稿2020/06/16 09:08

編集2020/06/16 11:41
hatena19

総合スコア33620

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問