uniapp下页面布局分析——占满父元素高度

因为不是专业前端，是在学习过程中，感觉这个页面布局是个大难点。虽然网上找找代码抄抄也能实现效果，但是下次遇到一个类似的问题，又是不会，又要花大量时间百度。还是得搞明白其中的基础知识，才能自己解决问题，并且把代码写的优雅点。

其实还没完全搞懂，写文章记录下，方便以后查询，且写文章也能让自己滤清思路，对理解有很大的帮助。

父元素高度

首先，讲自己理解上的一个大坑：就是自己在.vue文件上新增一个根节点，想让其占满整个屏幕剩余空间。设置其高度height:100%，但是发现没用：

<template>
    <view style="height: 100%; background-color: red">view>
template>

屏幕上看不到一点红。

开始我是觉得是自己的布局没用对。于是网上找了个方案：

<template>
    <view class="content"></view>
</template>
<style>
    .content {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background-color: red;
    }
</style>

确实行哈（uniapp是设置了头和底部导航栏的，它不会占用他们的位置，效果满意）：

但是，在继续学习中，我看到别人的height是能生效的，为什么我的不能呢？后面发现，人家的父元素是占满屏的，所以height才能生效。我又想，我这个view不就是根节点吗？怎么还不能满屏呢？于是去调试一下，发现，原来根节点不是我的这个view，而是还有其他包裹：

选择元素看包裹范围确实也是这样的哈：

在这个过程中，还发现上述方案的一个问题：

这个父元素的高度居然为0.我的view明明是它的子元素，怎么它等于view的高度呢？其实就是对position: absolute;的理解不到位。这里不是重点，就不讲了。总之就是感觉这个方案还不够好。

于是我就查怎么修改这个父元素的样式，让其高度占满。找到答案了，是App.vue，这个就是父元素所在（其实还是对vue的框架基础不了解，App.vue就是程序页面的起点呀）修改的方法也很简单，只需要在其样式中添加：

<style>
    page {
        display: flex;
        flex-direction: column;
        height: 100%;
    }
</style>

我还顺便让他的布局方式变成了display: flex;。然后我再回到最开始的样式，然后发现height: 100%生效了。

除了可以用height: 100%去占用整个剩余空间，我发现也可以用下面的这个方法：

<template>
    <view style="flex: auto; background-color: red"> </view>
</template>

这样也是占满全屏的，解析可以参考这个