Question

我有一个页面布局，有2个部分（主要容器）。每个主容器都有100％的高度和宽度。我希望第二部分中的图像类“pic”具有绝对定位，位于第二部分的底部。截至目前，它位于第一部分的底部。我想我没有正确清理的东西。我正在使用（移动第一初始化）模板。 http://www.initializr.com

可能没什么用，但这里是小提琴

DEMO 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

响应2列绝对定位

1 个答案: