如何保证height:100%;有效

今天遇到个问题，我将video组件设置height：100%；无效。（PS：已排除绑定数据问题）

wxml文件：

<view class="myContainer">
  <video id="myVideo" src="{{detail.video_url}}" controls="{{false}}" autoplay="{{true}}" loop='{{true}}' objectFit="fill"  controls='{{false}}' show-play-btn="{{false}}" enable-progress-gesture="{{false}}" binderror='error'>
  </video>  
</view>

wxss文件：

.myContainer {
  position: relative;
  width: 100%; 
  background-color: rgba(0, 0, 0, 0);
}

video {
  width: 100%; 
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
}

当我设置video的height为具体的数值或者100vh时，video会显示。height：100%；为什么会失效呢？

首先从定义上去理解，100%的含义是指组件高度相对父层的高度的百分比为100。不指定父层高度时，子元素高度100%是无法确定，会导致失效，因此必须确定父层的高度才能保证height：100%;这个属性起作用。

要解决现在的问题，就可以转化为如何确定父层高度这样一个问题了。
大概有以下几种方案：

1、给当前元素的父层设置具体的height: xxrpx；

.myContainer {
  position: relative;
  width: 100%; 
  height: 1334rpx;
  background-color: rgba(0, 0, 0, 0);
}

2、逐层父层直至根元素都设置height: 100%；(在这里我需要设置page和myContainer的height：100%; )

page {
  height: 100%;
}

.myContainer {
  position: relative;
  width: 100%; 
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
}

video {
  width: 100%; 
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
}

3、当前元素的父层使用定位确定具体位置 (即间接告知父层高度，此例中position：relative；视频还是不显示)

.myContainer {
  position: fixed;
  width: 100%; 
  top: 0；
  left: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0);
}

video {
  width: 100%; 
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
}