自定义导航栏组件，占位符问题

uni-app页面使用非原生顶部导航组件之后，页面上部分的内容被挡住，然后我通过一个空标签view来起到占位符的作用设置空标签view的height:calc (var(--status-bar-height) + 44px);运行之后height的值一直是和var(--status-bar-height)的值一样，也就是后面加的值没有加上去，这该如何解决？
下面是我写的简单的demo

<template>  
    <view>  
       <uni-nav-bar left-icon="back" fixed="true" title="测试"></uni-nav-bar>  
       <view class="navbarPlaceholder"></view>  
       <view>我是最顶部的内容</view>  
       <view style="height: 1000px;"></view>  
       <view>我是最底部的内容</view>  
    </view>  
</template>  

<script>  
    import uniNavBar from '@/components/uni-nav-bar.vue'  
    export default {  
        components:{  
            uniNavBar  
        },  
        data() {  
            return {  
                title: 'Hello'  
            }  
        },  
        onLoad() {  

        },  
        methods: {  

        }  
    }  
</script>  

<style>  
.navbarPlaceholder{  
    height: (var(--status-bar-height) + 44px);  
}  
</style>