我正在尝试制作一个响应式聊天框。所以我的外部 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%;
最佳答案
尝试
#messages {
height: 100%;
}
关于javascript - 如何在高度为 :100vh? 的 div 中制作可滚动的响应式 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37861953/