目前我有一个背景图片大小为封面的网页。我想在这个 div 中有 2 个高度为 100% 的 div。这些 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;
}