如何在聊天中的所有设备上使 div 的高度响应？答案

【问题标题】：How to make div's height responsive on all devices in chat?如何在聊天中的所有设备上使 div 的高度响应？
【发布时间】：2018-12-17 04:05:33
【问题描述】：

在开发聊天应用程序时，我遇到了一个与使 div 的高度灵活相关的问题。我的问题是如何让<div class="chat-body"> 在所有设备上占据从<div class="chat-header"> 到<div class="chat-footer"> 的整个高度。我需要这个 div 有灵活的高度。

.chat-header {
  height: 4rem;
  border-bottom: 1px solid #e7e9ed;
  position: fixed;
  top: 5rem;
  width: 66%;
}

.chat-body {
  max-height: 35rem;
  overflow: auto;
  position: fixed;
  top: 9rem;
  width: 66%;
}

.chat-footer {
  height: 4rem;
  border-top: 1px solid #e7e9ed;
  position: fixed;
  bottom: 0;
  width: 66%;
}

<div class="row">
  <div class="col-sm-4 contacts">This div contains list of contacts</div>
  <div class="col-sm-8 pr-0 chat-area">
    <div class="row chat-header">Contacts details</div>
    <div class="row chat-body">Incoming and outgoing messages will appear here</div>
    <div class="row chat-footer">Input field, where a user types messages</div>
  </div>
</div>

【问题讨论】：

您使用的是引导程序 4 吗？如果是这样，使聊天区域以列的方向弯曲，然后使 body flex-grow:1; bootply.com/JQ13dUvgVH

标签： html css

【解决方案1】：

Refer this screenshot

请使用此代码。

.chat-area{
  width: 300px;
    max-width: 100%;
    display: block;
    position: fixed;
    bottom: 0px;
    right: 15px;
    background-color: #fff;
    color: #000;
    z-index: 999;
    border: 1px solid #ccc;
}
.chat-header {
  padding:10px 12px;
  border-bottom:1px solid #ccc;
}
.chat-body {
    padding:10px 12px;
    height:200px;
    overflow-y:scroll;
}
.chat-footer {
  padding:10px 12px;
  border-top:1px solid #ccc;
}

【讨论】：

【解决方案2】：

如果你在你的 css @media screen and (min-width: 769px) 上使用它，你可以改变每个屏幕尺寸的高度，min-width 表示 769px 是你放在那里的配置会影响屏幕尺寸的最小尺寸。

例子：

@media screen and (min-width: 769px) {
  .chat-footer {
    height: 70px;
  }
}

@media screen and (min width: 550px) {
  .chat-footer {
    height: 90px;
  }
}

【讨论】：