5

初期画面に表示する必要がある 3 つの要素のセットがありますが、これらの要素の下にある本文は初期画面の下部にある必要がありますが、ユーザーはすべてをスクロールできる必要があります。ロード後。これの完璧な例は、dropbox.com のランディング ページ (ログアウトしたとき) です。

ユーザーがどれだけズームアウトしても、その線より下の要素はその下にとどまり、ユーザーが下にスクロールするまで表示されません。優れた CSS または jQuery ソリューションを探しています。

私はこれを見てきましたが、これらの 3 つの要素を単純に絶対的なものにすることはできません。

これを行う最善の方法は、3 番目の div の高さを最初の画面の下部まで拡張することです。どうすればこれを行うことができますか?

編集:合計で約 6 つの div があり、最初の 3 つだけを表示し、残りは最初の画面境界より下にある必要があります。

編集: これは div レイアウトの写真です:ここに画像の説明を入力

4

3 に答える 3

0

css だけでこれを達成できるはずですが、html と body タグを 100% の高さになるように定義することが重要です。

<body>
  <div class="first">
    <h1>First Box</h1>
  </div>
  <div class="second">
    <h1>Second Box</h1>
  </div>
  <div class="third">
    <h1>Third Box</h1>
  </div>
</body>

CSS:

* {
    margin: 0;
    padding: 0;
}
html, body {
    height: 100%;
}

div {
    height: 100%;
    text-align: center;
}

.first {
    background: #ccc;
}

.second {
    background: #999
}

.third {
    background: #000
}

h1 {
    color: white;
    padding-top: 100px;
}

Jsfiddle: http://jsfiddle.net/sLANY/

于 2013-07-25T18:59:54.567 に答える