css footer自适应布局

场景

当页面内容不够一屏时，footer固定到底部。当超过一屏时，根据实际高度，footer自动向下延伸。

实现

<template>
    <div class="demo">
        <div class="demo__content">
            <p>一条信息</p>
            <p>一条信息</p><p>一条信息</p>
            <p>一条信息</p><p>一条信息</p>
            <p>一条信息</p><p>一条信息</p>
            <p>一条信息</p><p>一条信息</p>
            <p>一条信息</p><p>一条信息</p>
            <p>一条信息</p><p>一条信息</p>
        </div>
        <div class="demo__footer">
            <p>footer</p>
            <p>联系我们</p>
        </div>
    </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
.demo {
    box-sizing: border-box;
    min-height: 100vh;
    position: relative;
    padding-bottom: 50px;
    &__content {
        p {
            padding: 20px;
            border-bottom: 1px solid #ccc;
        }
    }
    &__footer {
        background: #fff;
        text-align: center;

        position: absolute;
         100%;
        height: 50px;
    }
}
</style>