如何通过CSS完美调整聊天室布局块

Question

这一次我遇到了CSS切纸板的问题。我想在这里问你一个问题。我自己处理了两天，还是不能克服这个问题~我的英语不好，我试着把它完整地描述一下，对不起~

问题如下:有一个聊天室。蓝色是网页菜单和下方聊天区域之间的空间(白色是必须保持的距离)。

问题1:我的聊天室因为大小是设计师设置的，但是因为聊天室的原因，窗口的内容很大，所以最后在整个窗口的右边会有一个滚动，但实际上这个滚动不应该出现在最后。

问题2:当聊天室的黄色对话中消息不断增加时，可以像正常的通信软件一样滚动。我已经在chat_body中设置了calc(100vh-295px)。为什么我要任意设置295？这是因为我不希望聊天对话框区域因为消息的增加而导致整个布局出现问题，但现在如何设置它将导致滚动到底部。消息将被下面的绿色块阻止，或者聊天对话区域将导致太多消息内容从发布页面中耗尽。问题~i

想问你如何设置才能实现整个聊天室对话区域内容的完整查看，并将整个聊天室窗口固定在整个网页的底部而不需要在右侧滚动？

感谢您收看我的问题。

​

.wrap {
  width: 90%;
  margin: 0 auto;
}

.head {
  width: 100%;
  height: 60px;
  background-color: blue;
  margin-bottom: 80px;
}

.chat {
  background-color: #ccc;
  height: calc(100vh - 80px);
  display: flex;
}

.chat_list {
  flex: 1;
  height: 100%;
  background-color: #ee3f4d;
}

.chat_area {
  position: relative;
  flex: 2;
  background-color: #35333c;
}

.chat_head {
  background-color: #51c4d3;
  height: 60px;
}

.chat_body {
  overflow-y: auto;
  height: calc(100vh - 295px);
}
.chat_body .other_txt {
  display: block;
  background: yellow;
  padding: 8px;
  border-radius: 0 20px 20px 20px;
  margin: 10px;
}
.chat_body span {
  color: #ccc;
}
.chat_body .own_txt {
  display: block;
  background: yellow;
  margin-left: auto;
  padding: 8px;
  border-radius: 0 20px 20px 20px;
  margin: 10px;
  white-space: pre-wrap;
}

.chat_input {
  position: absolute;
  bottom: 0px;
  left: 0px;
  right: 0px;
  background-color: #43b244;
  height: 150px;
}
.chat_input .input_message {
  resize: none;
  width: 90%;
  height: 60px;
  margin: 12px 24px;
}

<!-- 聊天室畫面結構 -->
<div class="wrap">
  <div class="head">head</div>
  <div class="content">
    <div class="chat">
      <div class="chat_list">contact__list</div>
      <div class="chat_area">
        <div class="chat_head">contact__tool</div>
        <div class="chat_body">
          <div class="other">
             <p class="other_txt">
               hello~
             </p>
             <span>20210827 10:00</span>
          </div>
          <div class="own">
            <p class="own_txt">
               hello~how aru you?
               hello~how aru you?
               hello~how aru you?
               hello~how aru you?
               hello~how aru you?
               hello~how aru you?
               hello~how aru you? 
             </p>
             <span>20210827 10:00</span>
          </div>
           <div class="own">
            <p class="own_txt">
              I'm fine, thank you~ how about you
              I'm fine, thank you~ how about you
              I'm fine, thank you~ how about you
              I'm fine, thank you~ how about you
              I'm fine, thank you~ how about you
              I'm fine, thank you~ how about you
             </p>
             <span>20210827 10:00</span>
          </div>
           <div class="own">
            <p class="own_txt">
              I'm fine, thank you~ how about you
              I'm fine, thank you~ how about you
              I'm fine, thank you~ how about you
              I'm fine, thank you~ how about you
              I'm fine, thank you~ how about you
              I'm fine, thank you~ how about you
             </p>
             <span>20210827 10:00</span>
          </div>
           <div class="own">
            <p class="own_txt">
             I'm fine, thank you~ how about you
              I'm fine, thank you~ how about you
              I'm fine, thank you~ how about you
              I'm fine, thank you~ how about you
              I'm fine, thank you~ how about you
              I'm fine, thank you~ how about you
             </p>
             <span>20210827 10:00</span>
          </div>
        </div>
        <div class="chat_input">
           <textarea class="input_message" placeholder="enterMessage"></textarea>
        </div>
      </div>
    </div>
  </div>
</div>

​

Answer 1

对于问题1，如果您想删除div chat_body的滑动条，您可以相应地更改y-overflow，如隐藏。

对于第二个问题，如果你想移除整个html页面的滑动条，你可以修改.chat：height: calc(100vh - 140px)的css属性，然后整个html页面的滑动条就会消失。

老实说，在多次阅读之后，我仍然不能理解你的要求，你可以在这里分享更多关于你的要求的细节。