CODEWITHSUNDEEP
htmlcssheightparent-child
Kayos
Kayos

Reputation: 1

HTML - CSS / how to make the child divs height responsive to the parents

Example Issue: 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;

}

Hey guys, im trying to make a text box overlay a video Background and adopt the video divs height? any help ive poked around a bunch with no luck!

Zak

Upvotes: 0

Views: 4412

Answers (1)

IMI
IMI

Reputation: 2469

You need a height declaration and position:relative; on your parent element.

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

See Snippet. 

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

Upvotes: 2

Related Questions