Question

在使用聊天应用程序时，我遇到了与使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>

Answer 1

如果您在CSS @media screen and (min-width: 769px)上使用此功能，则可以更改每种屏幕尺寸的高度，min-width表示769px是您放置在其中的配置将影响该屏幕尺寸的最小尺寸。 / p>

示例：

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

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

Answer 2

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;
}

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

2 个答案: