私は今、この問題に約4時間座っています。長い道のりだと思います。だからここにいる:
ビューポートが特定の高さを超えるとすぐに、div コンテナーを垂直方向に分散したいと考えています。これが例のスケッチです。
HTML:
<div class="bubu">
<div class="center1"></div>
<div class="center2">
<div class="element"></div>
</div>
<div class="center3"></div>
<div class="center4">
<div class="element"></div>
</div>
<div class="center5"></div>
</div>
CSS:
* {
margin:0;
padding:0
}
body {
margin:0;
text-align:center;
background: no-repeat fixed center center #030303;
allowtransparency:true
}
.bubu {
background-color:#eee;
position: absolute;
height: 100%;
width:500px;
left: 50%;
margin-left: -275px;
/* width / 2 */
}
.center1 {
background-color:red;
position: relative;
height: 10%;
width:100%
}
.center2 {
background-color:yellow;
position: relative;
height: 35%;
width:100%
}
.center3 {
background-color:red;
position: relative;
height: 10%;
width:100%
}
.center4 {
background-color:yellow;
position: relative;
height: 35%;
width:100%
}
.center5 {
background-color:red;
position: relative;
height: 10%;
width:100%
}
.element {
background-color:#123456;
position: absolute;
height: 250px;
width:500px;
top:50%;
margin-top: -125px;
/* width / 2 */
}
margin:auto 0; 以降。仕事をしません(高さが0に変換されます)さまざまな種類のソリューションをすべて試しました。これ(jsfiddle)は、それに近づいたものです。
私がしたことは、基本的に 5 つのクラスを追加することでした。そのうちの 3 つとheight:10%;
、コンテナーを含む 2 つです。height:35%;
すべてが 1 つのコンテナーに囲まれています。height:100%;
ご覧のとおり、コンテナーが 500px から拡張されるたびに (私の例のサイズ)、中央が 2 回拡張されます。
どうすればこれを解決できますか??