响应式 2 列绝对定位

Question

我有一个包含 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;
}

Answer 1

我想问题可能是第二个容器实际上的height 为零。一种解决方案是设置一个固定的height：

.main-container4 {
    height: 100px;
}

Here is a demo.

如果你想让它有100%的高度，你需要设置

html { height: 100%; }

也是（连同容器上的height: 100%）。 Demo.