示例问题: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/

10-12 00:15
查看更多