Как ограничить высоту загрузочного контейнера

Question

Я пытаюсь создать страницу сообщений, на которой текстовое поле будет располагаться внизу страницы, а над ним будут отображаться сообщения. Вот мой код для страницы:

<div class="ui">

    <% @messages.each do |message| %>
            <% if message.body %>
             <% user = User.find(message.user_id) %>
                  <div class="item mt-3">   
                         <div class="list">
                           <div class="item">
                             <strong><%= user.first_name %></strong>
                                <div class="content">
                                    <%= simple_format(message.body) %>
                                </div>
                            </div>
                          </div>
                        </div>
            <% end %>
            <% end %>






    <%= form_for [@conversation, @message], html: {class: "ui reply form"}, remote: true  do|f| %>

       <%= f.text_area :body, class: "message-box",  id: "message-form"%>

      <button type="submit", class="send-button", style="display: inline">
        <i class="nav-link fa fa-paper-plane"></i>
     </button>



     <%= f.text_field :user_id, value: current_user.id, type: "hidden" %>

    <% end %>
    </div>
</div>

Проблема в том, что этот код отображается так

Текст работает под текстовым полем. Мой инстинкт состоит в том, чтобы поместить сообщения и текстовое поле в два отдельных поля и ограничить высоту верхнего, но я пытался безрезультатно.

Кто-нибудь может подсказать, как я смогу это сделать?

Answer 1

Я также думаю, что вам нужно добавить несколько пользовательских стилей CSS в div, содержащий сообщение. Как max-height: 100px и overflow-y: auto;

Было бы легче помочь вам, если бы вы могли предоставить полностью визуализированный HTML вместо шаблона.

Answer 2

Вы должны поместить оба в разные div и добавить 'max-height' туда, где отображается текст.

Также я предполагаю, что это происходит, потому что поле ввода текста имеет позицию с position: absolute . Вы можете сделать как положение: относительное , так и сделать отображение: блок . Если вы хотите выровнять вход внизу экрана, просто используйте вертикальное выравнивание