如何限制引导容器的高度答案

【问题标题】：How to restrict the height of a bootstrap container如何限制引导容器的高度
【发布时间】：2018-07-05 05:22:31
【问题描述】：

我正在尝试创建一个消息页面，文本框将位于页面底部，消息将显示在其上方。这是我的页面代码：

<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>

问题是这段代码显示如下

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

谁能建议我如何才能完成这项工作？

【问题讨论】：

查看bootstrap's grid system 的文档。如果您使用默认容器/行/列，则不需要太多自定义 css。

标签： css ruby-on-rails twitter-bootstrap

【解决方案1】：

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

我还假设这是因为文本输入字段的位置与 position:absolute。你可以同时制作 position:relative 和 display:block。如果你想在屏幕底部对齐输入，只需使用 vertical-align

【讨论】：

【解决方案2】：

我还认为您需要向包含消息的 div 添加一些自定义 css 样式。比如 max-height: 100px 和 overflow-y: auto;

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

【讨论】：