html - 需要使用 z-index 强制子 DIV 的高度为 100%

Question

我试图强制子 DIV 在父 DIV 中达到 100% 的高度。

父级 div 在 z-index:1 处包含一个图像

子div是z-index:9999

我无法让子 DIV 强制 100% 高度。

#protect_wrap   { width: 100%; 
                  float: left; 
                  background: #FFFFFF;
                  margin-top:0px;
                  text-align: center;
                  height: 100%;}

#protect_wrap img { z-index:1;}

#protect_col1    { width:200px;
                   margin: 0 auto; 
                   background: yellow;
                   z-index:999;
                   position:relative;
                   min-height: 100%;}

img.responsive-fill { width: 100%;
                      float: left; 
                      height: auto;}


<div id="protect_wrap">
     <img src="img/protect.jpg" class="responsive-fill">
     <div id="protect_col1"></div>
</div>

Answer 1

您可以将 #protect_col1 位置更改为绝对位置并将其父级 #protect_wrap 设置为相对位置，子级将跟随父级的高度和宽度。