HTML - CSS /孩子如何使div的高度響應的父母

示例問題：http://jsfiddle.net/4y5rqoxr/HTML - CSS /孩子如何使div的高度響應的父母

.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的高度？任何幫助都圍繞着一堆沒有運氣的幫助！

扎克

來源

2015-07-21 Kayos

你需要你的父元素的高度聲明和position:relative;。

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

請參閱代碼片段。

.outer { 
 
    min-width: 100%; 
 
    height:100%; 
 
    position:relative; 
 
} 
 
#bgvid { 
 
    position: relative; 
 
\t min-width: 100%; 
 
\t width: 100%; 
 
\t z-index: -100; 
 
\t background-size: cover; 
 
} 
 
.inner{ 
 
    position: absolute; 
 
\t top: 0; 
 
\t left: 0; 
 
\t 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>

來源

2015-07-21 12:15:31 IMI

謝謝，我可以看到小提琴這個工作，但不能得到解決在Dreamweaver中工作，所以我做了一個新的項目複製的HTML和CSS的是，仍然沒有雪茄？ – Kayos

okiee所以我做了一個新的網站，使用相同的代碼，這一個工程。不知道以前的問題是什麼，但它現在正在工作SUPER THANKS！ – Kayos

很高興你能工作。需要記住的重要一點是，父元素必須爲子元素使用高度聲明來使用基於百分比的高度測量。此外，您可能希望將此答案標記爲已接受，以便其他人不花時間嘗試解決此問題。 – IMI

HTML - CSS /孩子如何使div的高度響應的父母

回答

相關問題