我有一个包含 2 个部分（主容器）的单页布局。每个主容器都有 100% 的高度和宽度。我希望我在第二部分中的图像类“pic”具有绝对定位，位于第二部分的底部。截至目前，它位于第一节的底部。我想我只是没有清除正确的东西。我正在使用（移动优先初始化）模板。http://www.initializr.com
可能没有多大帮助，但这是小提琴
演示http://jsfiddle.net/jfarr07/7dWeY/
HTML
<div class="main-container3" id="sponsorship">
<div class="main wrapper clearfix">
<article>
<header class="branding">
OH THE POSSIBILITIES
</header>
</article>
</div> <!-- #main -->
</div> <!-- #main-container3 -->
<div class="main-container4" id="promotion">
<div class="wrap">
<div class="jared">
<img class="pic" src="images/jared.png" /></div>
<div class="jaredinfo"></div>
</div>
</div> <!-- #main-container4 -->
CSS
body {
height:100%;
overflow:scroll;
}
html {
height:100%;
}
article, aside, header {
display:block;
}
}
.main-container3 {
background-image:url(../images/gopherbackground.png);
background-position:center center;
background-repeat:no-repeat;
background-size:cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
min-height:100%;
}
.main-container4 {
background-image:url(../images/graybackground.png);
background-position:center center;
background-repeat:no-repeat;
background-size:cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
min-height:100%;
}
.wrap {
width:90%;
margin:0 auto;
height:100%;
min-height:100%;
}
.jared {
background-color:#0C6;
float:left;
position:relative;
height:100%;
min-height:100%;
width:40%;
}
.jaredinfo {
background-color:#C60;
float:right;
position:relative;
height:100%;
min-height:100%;
width:60%;
}
.pic {
position:absolute;
bottom:0;
}
.branding {
font-size:44px;
color:#FFF;
font-family: source-sans-pro, sans-serif;font-weight:700;
text-align:center;
}
.wrapper {
width: 90%;
margin: 0 5%;
max-width:1000px;
}
.main {
padding: 30px 0;
}