如何在高度为 100vh 的 div 内制作可滚动的响应式 div？

Question

我正在尝试制作一个响应式聊天框。所以我的外部 div 有 height:100vh。

.g_chat { 
  height:100vh;

messages div 在.g_chat 中。这是我的聊天框在消息 div 高度较小时的外观。

  #messages { 
    max-height: 400px;

我正在尝试让消息 div 适合 g_chat div。因此，当我尝试以下操作时

  #messages { 
    height:100vh;

这会导致消息 div 变得很长，我看不到表单按钮。

这是我完整的 scss 文件

.g_chat { // the WHOLE chat window, including messages, form and hide/show button
  z-index: 1;
  width: 300px;
  height:100vh;
  position: fixed;
  right: 0;
  bottom: 0;
  border: 1px solid #404040;
  background-color: #FDFDFD;
  border-radius: 5px 5px 0 0;
  &.collapsed { // chat window is collapsed
    height: auto;
    .global_chat_inner {
      display: none;
    }
  }

  .g_chat_toggler { // the actual button to hide/show chat window
    cursor: pointer;
    color: #fff;
    background-color: #404040;
    padding: 7px 0px 7px 0px; 
  }

  form { // form to submit message
    margin-top: 8px;
    padding: 0px 2px 0px 2px; 
  }

  #messages { // all messages are displayed here
    background-color: #f2f4f5;
    height:100vh;
    overflow-y: auto;
    overflow-x: hidden;
    .message {
      padding: 2px 5px 0px 5px; 
      margin-bottom: 10px;
      background-color: #fff;
      &:last-of-type {
        margin-bottom: 0;
      }
    }
  }
}

这是我用来显示聊天框的 erb 文件。

  <div class="global_chat_inner">
    <div id="messages">
      <%#= render @messages %>
      <%= render partial: 'messages/message', collection: @messages, as: :message  %>
    </div>

    <%= form_for @message, url: '' do |f| %>
    <%#= f.label :body %>

      <div class="row">
        <div class="col-md-9 nopadding">
          <%= f.text_field :body, autocomplete: "off", placeholder: "Type a message ...", autofocus: true, class: 'form-control' %>
        </div>
        <div class="col-md-3 nopadding">
          <%= f.submit 'Send', class: 'form-control chatbutton' %>
        </div>        
      </div>

    <% end %>
  </div>

</div>

尝试了各种高度、最小高度、最大高度以及 % 和 px 和 vh 的组合。有人可以帮助解决这个问题吗？谢谢

编辑：这就是高度 100% 的样子。看不到表单也没有滚动条。

#messages { 
    height: 100%;

Answer 1

试试

 #messages { 
height: 100%;
}