HTML - CSS /如何使子div的高度响应父母

Question

示例问题：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高度？任何帮助我已经戳了一堆没有运气！

扎克

Answer 1

您的父元素需要高度声明和position:relative;。

.outer {
    height:100%;
    position:relative;
}

请参阅代码段。

＆＃13;

＆＃13;

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

＆＃13;

<div class="outer">
    <video autoplay  poster="http://placehold.it/1600x900" id="bgvid" loop>
    <source src="" type="video/webm">
    </video>
    <div class="inner">
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;