如何实现聊天消息溢出时message-box div自动扩展高度至页面底部

核心修改逻辑 #

• 将外层.chat容器改为垂直弹性布局，方便内部元素动态适配高度
• 移除.message-box的固定高度限制和滚动条配置，改为最小高度保证基础样式，最大高度限制为弹窗可用高度上限，实现内容增多时自动扩容到弹窗底部的效果
• 顺带修正原代码中box-shadow属性的字符笔误（数字0被误写为字母O）

修改后完整CSS代码 #

.chat{
  grid-area:chat;
  width:400px;
  height:600px;
  border-radius: 25px;
  /* 替换原inline-block为垂直弹性布局 */
  display:flex;
  flex-direction:column;
  vertical-align:top;
}

.message-box{
  clear:both;
  /* 移除原来的overflow:auto，避免出现滚动条 */
  position:relative;
  width:360px;
  /* 替换固定height:75%为最小高度，保证默认展示效果 */
  min-height:75%;
  /* 增加最大高度限制，最多扩展到弹窗底部（减去上下margin总和70px：上margin60px+下margin10px） */
  max-height: calc(100% - 70px);
  margin:10px;
  margin-top:60px;
  border-radius:5px;
  background-color:#f0ffff;
  /* 修正原代码中字母O为数字0 */
  -webkit-box-shadow: 0px 0px 12px -2px #000000;
  box-shadow: 0px 0px 12px -2px #000000;
}

.my-message{
  position:relative;
  text-align:left;
  color:white;
  background-color:blue;
  border-radius:20px;
  padding:10px;
  margin:10px;
  width:70%;
}

.others-message{
  position:relative;
  text-align:left;
  color: white;
  background-color:grey;
  border-radius:20px;
  padding:10px;
  margin:10px;
  margin-left:100px;
  max-width:70%;
  min-height:40px;
}

补充说明 #

如果希望哪怕消息内容再多也完全不出现滚动条、允许内容超出chat容器范围，直接删掉.message-box的max-height配置即可；如果后续需要避免消息过多撑破弹窗布局，可在.message-box中加回overflow:auto属性，实现内容超过弹窗可用高度后才出现滚动条的效果。

内容的提问来源于stack exchange，提问作者bl4ckshoxx