如何保证height:100%;有效

今天遇到个问题,我将video组件设置height:100%;无效。(PS:已排除绑定数据问题)

wxml文件:


    

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);
}

你可能感兴趣的:(如何保证height:100%;有效)