如何限制引导容器的高度

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>

问题是此代码显示为this

文本在文本框下运行。我的直觉是将消息和文本框放在两个单独的框中并限制顶部框的高度，但我一直试图这样做无济于事。

任何人都可以建议我如何能够完成这项工作？

Answer 1

您应将两者放在不同的div中，并将“max-height”添加到文本显示的位置。

此外我假设发生了这种情况，因为文本输入字段是位置：绝对位置。你可以同时制作两个位置：相对并同时显示：block。如果要对齐屏幕底部的输入，请使用vertical-align

Answer 2

我还认为你需要为div包含消息添加一些自定义css样式。像max-height：100px和overflow-y：auto;

如果您可以提供完全呈现的html而不是模板，那么帮助您会更容易。