前端项目实战5：聊天对话框

目录

1.如何隐藏滚动条？

2.对话框的宽度：max-width: calc(100% - 30rem);

 3.p标签的内容换行之后，觉得太挤了？

4.阴影效果

5.用户发出信息之后，如何让滚动条始终自动滑到最底部？

---

1.如何隐藏滚动条？

.chat-box{
    background-color: #f7f7f7;
    padding: 10px 30px 20px 30px;
    height: 82%;
    /* border: 1px solid red; */
    overflow-y: auto;
}

:is(.chat-box)::-webkit-scrollbar{
    width: 0px;
}

注意，要设置height，设置overflow-y（使溢出的部分可以进行滚动），

:is(.chat-box)::-webkit-scrollbar{
    width: 0px;
}   ------------》则可以隐藏滚动条。