vue.js客服系统实时聊天项目开发(二)
2023-02-25 18:19:03 时间
我想要实现的效果是,三个元素,第一个是标题,第二个是消息列表是自适应高度的,第三个是输入框
<template>
<div class="chatAppBody">
<div class="chatTitle">标题</div>
<div class="chatBox">消息列表</div>
<div class="chatBottom">输入框区域</div>
</div>
</template>
<script>
export default {
name: 'ChatApp',
data() {
return {
}
},
methods: {
},
mounted: function () {
}
}
</script>
<style lang="scss">
.chatAppBody{
display: flex;
flex-direction: column;
height: 100vh;
background-color: #f1f5f8;
}
.chatTitle{
background: #fff;
}
.chatBox{
flex: 1;
}
.chatBottom{
background: #fff;
}
</style>
class 为 "chatAppBody" 的容器元素。它设置了 display 为 flex,使其变为一个 flex 容器,并将 flex-direction 设置为 column,使其子元素在垂直方向上排列。同时设置了高度为 100vh(必须设置高度)
"flex: 1" 是 CSS Flexbox 布局中的一个属性。它用于设置 flex-grow 属性。flex-grow 属性定义了项目的放大比例,默认值为 0。当所有项目的 flex-grow 值之和为正数时,剩余空间将平均分配给这些项目。
例如上面这段代码中, .chatBox 元素设置了 flex-grow 为 1,意味着它会占用剩余空间的1份。 这样做的好处是可以让子元素自动填充剩余空间,而不需要设置具体的高度值。
相关文章
- Golang比php开发好在哪?
- C++——拷贝构造和 运算符重载
- Linux 运维 17 个实用技巧
- 周而复始,往复循环,递归、尾递归算法与无限极层级结构的探究和使用(Golang1.18)
- sudo,代表了Linux的绝对霸权!
- 完全使用Linux替换Windows之后,我觉得自己非常愚蠢
- GitlabRunner+K8S 实现自动化发布
- C/C++ Qt StandardItemModel 数据模型应用
- GIT分布式版本控制系统 | 命令讲解入门
- Linux自动挂载 (autofs)
- Linux 计划任务
- NFS (网络文件系统) | CentOS7 升级系统和内核 | Linux man 命令汉化
- Linux快捷键 | 破解密码 | 正则 | 永久行号显示
- Linux权限管理
- Linux用户账号管理
- Linux逻辑分区| 扩容 | 挂载
- Jgit的使用笔记
- 利用Github Action实现Tornadofx/JavaFx打包
- Linux基础命令
- Linux 基础篇 vim | 网卡