4

私はこれを達成する方法を探していましたが、答えを見つけることができないようです。ビューポートのサイズ（高さと幅の両方）が異なり、背景色が異なる一連のパネルで構成される1ページのWebサイトを作成したいと思います。

したがって、ページにアクセスすると、ビューポートがパネル1でいっぱいになり、次にパネル2までスクロールして、ビューポートも完全にいっぱいになります。

これが私が何を意味するかを説明するための簡単なテストページです：http：//dev.manifold.ws/test/ しかし、明らかに、私が望むのは、各パネルの高さをビューポートの100％にすることです（固定の高さではありません）。

これが成功しているより複雑なサイトです：http ：//www.deuxhuithuit.com

これを達成するためのかなり簡単な方法があるに違いないと思いますが、私はそれを見つけることができないようです。

どんな助けでも大歓迎です。jQueryが必要ですか？プラグインに依存する必要がありますか？または、CSSでこれを行う方法はありますか？

ありがとう、

-トム

4

2 に答える 2

6

さて、結局私はそれを理解したように見えます。結局、それは本当に簡単でした。jQueryやプラグインは必要ありません。テストページを実際の例で更新しました：http：//dev.manifold.ws/test/

HTMLは次のとおりです。

<body>

  <section id="red">
  </section>

  <section id="blue">
  </section>

  <section id="green">
  </section>

</body>

そしてCSS：

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

#red {
min-height:100%;
position:relative;
background:#F00;
}

#blue {
min-height:100%;
position:relative;
background:#00F
}

#green {
min-height:100%;
position:relative;
background:#0F0;
}

かなり簡単です。

于 2012-08-14T21:30:24.663 に答える
0

One PageNavjQueryプラグインを使用しているようです。

http://trevordavis.net/blog/jquery-one-page-navigation-plugin/

デモは次のとおりです：http： //trevordavis.net/play/jquery-one-page-nav/

今朝、StackOverflowの質問にこれが実装されているのを見ました： http ：//www.visualwayofthinking.com/en/

上部のタブをクリックして、アニメーションを表示します。

于 2012-08-14T17:08:42.020 に答える