高さ：100vhのdiv内でスクロール可能な反応型divを作成するにはどうすればよいですか？

Question

私は応答可能なチャットボックスを作ろうとしています。だから私の外側divは100vhの高さです。

.g_chat { 
    height:100vh; 

メッセージ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

あなたがメッセージのdivに静的％の高さと幅を与えることをしようとしない理由

#messages { 
height: 100%; 
}