首页 > 其他分享 >vue.js客服系统实时聊天项目开发(二)界面代码css display:flex实现垂直方向自适应高度

vue.js客服系统实时聊天项目开发(二)界面代码css display:flex实现垂直方向自适应高度

时间:2023-01-13 22:55:25浏览次数:67  
标签:flex vue background 高度 display 设置 js grow

我想要实现的效果是,三个元素,第一个是标题,第二个是消息列表是自适应高度的,第三个是输入框

<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

标签:flex,vue,background,高度,display,设置,js,grow
From: https://www.cnblogs.com/taoshihan/p/17050930.html

相关文章