【HTML】編集可能なDIVの高さを固定にしたい、レイアウト相談

Question

お世話になっております。

前提・実現したいこと

Androidアプリで、ユーザーに入力してもらう画面を作成中です。
最初はTableで横並びに入力することを考えていました。
文字数が多くなる場合や、改行もあるであろうことを考え、
2個目の図のレイアウトにしようと検討しています。
補足の入力欄にリンクがあれば、リンクをJavascriptで変換し
飛べるようにもしたいと思っています。

![

聞きたい事

• DIVの高さを固定するにはどうしたら良いのでしょうか
• 添付画像、2個目の図のように入力欄や選択肢を作る場合は

　Tableレイアウトにしたほうが良いか（参考までコメント欲しいです)
Tableじゃない場合は、Listにして並べようと思っています。

発生している問題・エラーメッセージ

        <ons-list-header>キャラクター名</ons-list-header>
        <ons-list-item>
          <div class="ReDiv" contenteditable="true">
            キャラクター名</div>
        </ons-list-item>

contenteditable設定にしたDIVの高さが可変になってしまい、
改行すると他の内容まで下に下がっていってしまいます。
DIVの高さを固定にしたいと思っています。

<ons-list-item> の中に入れると、謎の空行などが出来ます。
綺麗な表形式（2個目の図)みたいにあらわせるのであれば、
ons-list-itemに入れずに

<div class="ReDiv"; contenteditable="true";>キャラクター名</div> という表示方式でも構いません。

.ReDiv{
width:100%;
min-height: 100px;
max-height:300px;
white-space:pre-wrap;
overflow:auto;
}

試したこと

ons-list-item　の中から出してみても、状況特に変わらず。
divタブに直接height:300px;など指定してみましたが、特に変わりませんでした。

textareaだと表示が古く、Androidアプリには向かないと思ったのと
ユーザーが編集可能なDIVエリアにヒント表示や、ボタンや、リンクなど
追加したいと思っているためDIVにしています。
textareaについては別途、CSSで良い感じに出来るかどうかは調べる予定です。

補足情報（FW/ツールのバージョンなど）

Monaca、Onsen UI利用

Comments

[m.ts10806]

回答依頼いただいて申し訳ないですが、MonacaユーザーではないのでMonaca特有の記述やOnsen UIについてはあまり詳しくないので直接の回答は難しいです。
ご提示の要件だとtableで組むのがベターかなとは思いますが(ほぼ表なので)

[退会済みユーザー]

mts10806様
申し訳ありません、また依頼してしまいました。
回答頂き、またアドバイスありがとうございます！

[yambejp]

「文字数が多くなる場合や、改行もあるであろう」ことを想定しているのに
高さを固定する意図がわかりません。
可変なテキスト量に対しては高さは変動すべきでは？

[退会済みユーザー]

yambejp様
回答ありがとうございます。説明不足で申し訳ありませんでした。
DIV内で改行をたくさん入力した場合に、次の項目入力に行きたいときでも
すぐに移動できなくなってしまいます。
図の例で言うのであれば、一言の欄で100改行したとして、
その次の補足にも入れたい場合にスクロールを凄くしないといけなくなります。
また、私の組み方が悪いのか、HTMLのスクロールバーが出ず、一言に100改行を入れてしまうと
画面全体が一言の内容になってしまい、スクロールの手段もない状態になります。
ユーザーには、大量に改行をしたとしても、楽々次の項目を入力してもらえたらなと思っています。

[teruri]

もしかして：中の要素が固定高さを越えたらスクロールバーを出したいということでしょうか？

[退会済みユーザー]

teruri様
回答ありがとうございます。
そうです!!!　推察頂きありがとうございます!

Answer 1

先ほどまで出来なかったのに、何故か出来るようになりました。
もしかしたらCSSとHTML上の両方でheightを決めていたからおかしくなったのかもしれません。
回答や質問頂いた皆様、ありがとうございました。

<div style="height:100%;width:100%;overflow:auto;">
        <ons-list-header>キャラクター名</ons-list-header>
        <ons-list-item>
          <div class="ReDiv" contenteditable="true">キャラクター名</div>
        </ons-list-item>
</div>

.ReDiv{
width:100%;
height:100px;
white-space:pre-wrap;
overflow:auto;
}