使用Rails迭代进行麻烦的溢出

Question

我正在使用Rails应用程序开发消息传递系统。现在，我正在做的是在一个视图上呈现current_user的所有对话和消息，在页面加载时将其隐藏，并显示与current_user选择的用户关联的消息（从current_user已经开始对话的用户列表中）。我遇到的问题是，随着消息数量的增加，页面的长度也会增加。为了解决这个问题，我包装了将在div中呈现的所有消息，并为div提供了hidden的溢出属性（最初我将其设置为auto，但切换到hidden来查看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;
}

问题

Answer 1

这实际上不是Rails问题，而是html / css。

尝试将div的display设置为none，而不要用其他任何方式将其隐藏。这样，其他更长的对话不会使对话框变得比所需的更大。 关于按设计调整整个对象的大小，请检查flex和/或css-grid，这可以使您执行此操作。这里是一个简短的示例：https://jsfiddle.net/ce06r98v/

学习弹性框的好资源：https://flexboxfroggy.com/ 或者，如果您想使用网格：http://cssgridgarden.com/