100％高度格在背景覆盖div

Question

目前我有一个网页的背景图像大小的封面。我想在这个div中有2个div，100％的高度。这些div需要有响应。我需要左边的div有一个图像坐在底部。我使用的主容器clearfix但是类PIC仍然上升到容器1

HTML

<div class="main-container1 clearfix"> 
</div> 

<div class="main-container2 clearfix"> 
<div class="wrapper"> 
    <div class="leftside"><img class="pic" src="image/blank.png" /></div> 
    <div class="rightside"></div> 
</div> 
</div> 

CSS

body { 
height:100%; 
overflow:scroll; 
} 

.main-container1 { 
background-image:url(../images/footballfieldblur.jpg); 
background-position:center center; 
background-repeat:no-repeat; 
background-size:cover; 
min-height:100%; 

} 
.main-container2 { 
background-image:url(../images/footballfieldblur.jpg); 
background-position:center center; 
background-repeat:no-repeat; 
background-size:cover; 
min-height:100%; 

} 

.wrapper { 
width:90%; 
margin:0 auto; 
height:100%; 
min-height:100%; 
} 

.leftside { 
width:40%; 
height:100%; 
min-height:100%; 
float:left; 
position:relative; 
} 

.rightside { 
width:60%; 
height:100%; 
min-height:100%; 
float:right; 
position:relative; 
} 

.pic { 
position:absolute; 
bottom:0; 
} 

.clearfix:before, 
.clearfix:after { 
content: " "; 
display: table; 
} 

.clearfix:after { 
clear: both; 
} 

.clearfix { 
*zoom: 1; 
} 

Answer 1

好的家伙，我想通了。我的div没有扩大我的clearfix容器的100％高度，因为clearfix类不是100％的高度。

.clearfix { 
*zoom: 1; 
height:100%; 
min-height:100%; 
}