共计 821 个字符,预计需要花费 3 分钟才能阅读完成。
我想要实现的成果是,三个元素,第一个是题目,第二个是音讯列表是自适应高度的,第三个是输入框
<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 份。这样做的益处是能够让子元素主动填充残余空间, 而不须要设置具体的高度值。
惟一在线客服零碎
https://gofly.v1kf.com
正文完