我想要实现的成果是，三个元素，第一个是题目，第二个是音讯列表是自适应高度的，第三个是输入框
<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