1

現在、背景画像のサイズがカバーの Web ページがあります。この div 内に高さ 100% の 2 つの div が必要です。これらの div はレスポンシブである必要があります。下部に画像を配置するには、左側の div が必要です。メイン コンテナで clearfix を使用していますが、クラスの画像はまだコンテナ 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;
}
4

1 に答える 1

1

わかりましたみんな私はそれを理解しました。clearfix クラスが 100% の高さではないため、私の div は私の clearfix コンテナの 100% の高さを拡張していませんでした。

.clearfix {
*zoom: 1;
height:100%;
min-height:100%;
}
于 2013-05-21T01:06:33.220 に答える