我在jsFiddle中的大多数代码：
http://jsfiddle.net/MilkyTech/suxWt/
内容应该在白色框中的第一页上加载,溢出的内容会将页面的以下部分向下推.但是,可以看出,下部加载在第一页白框的顶部.我试过改变各个部分的定位/清除但似乎无法创建必要的动作.
<section class="page1">
<div class="huge-title centered">
<div id='detailsBox'>
<h1 id='eorvtitle'></h1>
<img id='eorvimage' src=''>
<div><p>lots of text lots of text
</div>
</div>
</section>
<section class="page2" id='page2'>
</section>
.page1 {
background: url('../img/bg.jpg')#131313;
background-size: cover;
height: 100%;
position: relative;
}
.huge-title {
position: absolute;
top: -20%;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 100%;
height: 180px;
}
#detailsBox {
top: -4em;
width: 75%;
left: 12.5%;
right: 12.5%;
border: 20px solid white;
border-radius: 10px;
background-color: white;
text-align:center;
position: absolute;
float: left;
clear: both;
}
解决方法
你需要改变.huge-title和#detailsBox到position：relative;
你可以摆脱背景大小：封面;
还将.huge-title和#detailsBox更改为以下内容：
你可以摆脱背景大小：封面;
还将.huge-title和#detailsBox更改为以下内容：
.page1 {
background: url('../img/bg.jpg')#131313;
height: 100%;
position: relative;
}
.huge-title {
position: relative;
top: 20%;
right: 0;
left: 0;
margin: auto;
height: 100%;
}
#detailsBox {
top: -4em;
width: 75%;
left: 12.5%;
right: 12.5%;
border: 20px solid white;
border-radius: 10px;
background-color: white;
text-align: center;
position: relative;
float: left;
clear: both;
}
