<template>
    <view class="scrool-page" ref='xx'>
        <view class="header-cont">头部</view>
        <view class="list-cont">
            <scroll-view class="scrool-more" style="height: 100%" scroll-y="true" scroll-with-animation="true">
                <view lass="list" v-for="(item,index) in list" :key="index">
                    {{item.cont}}
                </view>
            </scroll-view>
        </view>

        <view class="footer">
            <button type="primary">提交</button>
        </view>

    </view>
</template>

<script>
    export default {
        data() {
            return {
                list: [{
                        cont: "张三"
                    },
                    {
                        cont: "张三"
                    },
                    {
                        cont: "张三"
                    },
                    {
                        cont: "张三"
                    },

                    {
                        cont: "张三"
                    },
                    {
                        cont: "张三"
                    },
                    {
                        cont: "张三"
                    },
                    {
                        cont: "张三"
                    },

                    {
                        cont: "张三"
                    },
                    {
                        cont: "张三"
                    },
                    {
                        cont: "张三"
                    },
                    {
                        cont: "张三"
                    },
                    {
                        cont: "张三"
                    },
                    {
                        cont: "张三"
                    },
                    {
                        cont: "张三"
                    },
                    {
                        cont: "张三"
                    },
                    {
                        cont: "张三"
                    },

                    {
                        cont: "张三"
                    },
                    {
                        cont: "张三"
                    },
                    {
                        cont: "张三"
                    },
                    {
                        cont: "张三"
                    },

                    {
                        cont: "张三"
                    },
                    {
                        cont: "张三"
                    },
                    {
                        cont: "张三"
                    },
                    {
                        cont: "张三"
                    },
                    {
                        cont: "张三"
                    },
                    {
                        cont: "张三"
                    },
                    {
                        cont: "张三"
                    },
                    {
                        cont: "张三"
                    },
                    {
                        cont: "张三"
                    },
                    {
                        cont: "张三"
                    },
                    {
                        cont: "张三"
                    },
                    {
                        cont: "张三"
                    },

                    {
                        cont: "张三"
                    },
                    {
                        cont: "张三"
                    },
                    {
                        cont: "张三"
                    },
                    {
                        cont: "张三"
                    },

                    {
                        cont: "张三"
                    },
                    {
                        cont: "张三"
                    },
                    {
                        cont: "张三"
                    },
                    {
                        cont: "张三"
                    },
                    {
                        cont: "张三"
                    },
                    {
                        cont: "张三"
                    },
                    {
                        cont: "张三=="
                    },
                ]
            }
        },
        mounted() {
            console.log(this.$refs.xx.$parent.$el.clientHeight);
            console.log(this.$refs.xx.$el.style)
            this.$refs.xx.$el.style.height = this.$refs.xx.$parent.$parent.$el.clientHeight + 'px'
        }
    }
</script>

<style lang="less">
    page {
        width: 100%;
        height: 100%;
    }


    .scrool-page {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
    }

    .header-cont {
        width: 100%;
        height: 110rpx;
        line-height: 100rpx;
        text-align: center;
        background: red;
    }

    .list-cont {
        flex: 1;
        position: relative;

        .scrool-more {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
        }

        .list {
            height: 80rpx;
            line-height: 80rpx;
            text-align: center;
            background: #e0e0e0;

        }
    }


    .footer {
        color: #fff;
        line-height: 100rpx;
        flex: 0 0 100rpx;
        /* 不放大不缩小固定100rpx */
    }

    body,
    html {
        -webkit-user-select: none;
        user-select: none;
        width: 100%;
        height: 100%;
    }
</style>