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

您应同时将其放置在不同的div中，并在文本显示的位置添加'max-height'。

我也假设发生这种情况，因为文本输入字段是位置为 position：absolute 的位置。您可以同时创建两个 position：relative 和两个 display：block 。如果要在屏幕底部对齐输入，请使用 vertical-align

Answer 2

我还认为您需要向包含消息的div中添加一些自定义CSS样式。像max-height：100px和溢流y：自动；

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

如何限制引导容器的高度

2 个答案: