使用 rails 迭代时出现溢出问题答案

【问题标题】：Trouble making overflow working with rails iteration使用 rails 迭代时出现溢出问题
【发布时间】：2018-09-20 20:58:03
【问题描述】：

我正在我的 Rails 应用程序中开发一个消息传递系统。现在我正在做的是在一个视图上呈现 current_user 的所有对话和消息，在页面加载时隐藏它们，并显示与 current_user 选择的用户相关的消息（来自 current_user 已经开始对话的用户列表）。我遇到的问题是，随着消息数量的增加，页面的长度也会增加。为了解决这个问题，我将所有将要在 div 中呈现的消息包装起来，并给该 div 一个隐藏的溢出属性（最初我将其设置为自动，但切换到隐藏以查看 prop 是否可以工作）。不幸的是，这没有奏效。

视图（用户从中选择要向谁发送消息的列表在布局中）

<div id="message-view" class="">
<% @conversations.each do |convo| %>
  <div id="<%= convo.id %>" class="tabcontent conversations-message">
    <% convo.messages.each do |message| %>
      <% if message.user != current_user %>
        <div class="float-left small">
          <%= message.body %>
        </div><br>
      <% else %>
        <div class="float-right small">
          <%= message.body %>
        </div><br>
      <% end %>
    <% end %>
  </div>
<% end %>
  <div class="message-bar">
      message bar
  </div>
</div>

CSS

#message-view{
  position: relative;
}
#message-view .message-bar{
  position: fixed;
  bottom: 0;
  height: 150px;
  border: 2px solid;
  border-color: rgb(232,233,232);
  width: 73%;
}
.search-conversations{
  height: 30px; width: 210px;
}
.grey{
  background-color: rgb(236,236,236);
}
.conversations-message{
  display: block;
  height: 200px;
  overflow: hidden;
  position: fixed;
  top: 0;
}

问题

【问题讨论】：

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

【解决方案1】：

这并不是真正的 rails 问题，而是 html/css。

尝试将您的 div 的 display 设置为 none 而不是以任何其他方式隐藏它。这样，其他较长的对话不会使对话框变得比必要的大。关于按设计调整整个事物的大小，请查看 flex 和/或 css-grid，它们允许您执行此操作。这里有一个简短的例子：https://jsfiddle.net/ce06r98v/

学习 flexbox 的好资源：https://flexboxfroggy.com/ 或者如果你想使用网格：http://cssgridgarden.com/

【讨论】：