示例问题:http://jsfiddle.net/4y5rqoxr/
.outer {
min-width: 100%;
}
#bgvid {
position: relative;
min-width: 100%;
width: 100%;
z-index: -100;
background-size: cover;
}
.inner{
position: absolute;
top: 0;
left: 0;
width:33%;
height:100%; /*HOW TO MAKE THIS 100% OF THE PARENT DIV? NOT 100% VIEWPORT*/
background:#FF0004;
}
大家好,我想让文本框覆盖视频背景并采用视频div高度吗?任何帮助香港专业教育学院戳了一大堆没有运气!
扎克
最佳答案
您需要一个高度声明和您的父元素上的position:relative;
。
.outer {
height:100%;
position:relative;
}
请参见摘录。
.outer {
min-width: 100%;
height:100%;
position:relative;
}
#bgvid {
position: relative;
min-width: 100%;
width: 100%;
z-index: -100;
background-size: cover;
}
.inner{
position: absolute;
top: 0;
left: 0;
width:33%;
height:100%; /*HOW TO MAKE THIS 100% OF THE PARENT DIV? NOT 100% VIEWPORT*/
background:#FF0004;
}
<div class="outer">
<video autoplay poster="http://placehold.it/1600x900" id="bgvid" loop>
<source src="" type="video/webm">
</video>
<div class="inner">
</div>
</div>
关于html - HTML-CSS/如何使 child 的div高度响应 parent ,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/31538714/