1

ページの高さ全体を占める最初の最初の最初のセクションを取得しようとしています。ここでこの質問を試しました: div を初期画面に合わせますが、動作させることができません。すべてが重なっています。

私のナビゲーション バーは最初のセクションの中央に配置され、ページがスクロールされると上部に固定されます。ページ全体を占めるには最初の部分だけが必要です。

このような:

ここに画像の説明を入力

Spotifyもウェブサイトでそれを行います

私の HTML: タイトル

    <body>

    <span id="top"></span>


        <div id="floater"></div>
        <div id="centered">
        <div id="sticky_navigation_wrapper">
            <div id="sticky_navigation">
               <div class="navbar">
                    <a class="navbar" href="#about">about</a>   <a class="navbar" href="#portfolio">portfolio</a>   <a class="navbar" href="#top"><img src="/media/nav/logo.png" alt="Logo" /></a>  <a class="navbar" href="#social">social</a> <a class="navbar" href="#contact">contact</a>
            </div>
        </div>
   </div>
   </div>
   <div>
   <a>Random Text here, blah blah blah!</a>
   </div> 
   </body>

私のCSS

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

#floater {
    position:relative; float:left;
    height:50%; margin-bottom:-25px;
    width:1px;
}

#centered {
    position:relative; clear:left;
    height:50px;
    margin:0 auto;
}

#sticky_navigation_wrapper { 
width:100%; height:50px; 
}

#sticky_navigation { 
width:100%; height:50px; background-color:rgb(241, 241, 241); text-align:center; -moz-box-shadow: 0 0 5px #999; -webkit-box-shadow: 0 0 5px #999; box-shadow: 0 0 5px #999; 
}
4

4 に答える 4

0

私がこのようなサイトで使用する最善の解決策は、各セクションを含む div でラップすることだと思います (または、すべてのターゲット ブラウザーがそれをサポートしている場合、または html5 shiv の使用を気にしない場合)。

そのようです

<div class="section">
  <p>Hello World</p>
</div>

<div class="section">
  <p>Hello World</p>
</div>

次に、その div の高さ: 100% と幅: 100% のように指定できます...

.section{
  height: 100%;
  width: 100%;
}

この jsfiddle ですべてをまとめて見ることができます: http://jsfiddle.net/Ucetz/

于 2013-07-21T15:00:47.487 に答える
0

HTML タグと BODY タグのスタイルには、必ず height: 100% を含めてください。次に、セクションの高さを設定します。

于 2016-04-12T18:44:48.177 に答える
0

私はいつもこれを自分のウェブページにしています。position: fixed; top: 0px; left: 0px; width: 100%; height: 100%;スタイルを含む div を追加するだけです。これにより、Web ページ全体をカバーする領域のような色合いが得られます。その後、その div 内に必要なものを入れることができます。

垂直方向の中央に配置するには、少し計算して div を使用します。したがって、div の高さが になる場合は、上記と同じ仕様で再度400px作成しposition: fixedます。ただし、 を変更top50%、次にmargin-top負の値を高さの半分に変更します。したがって、この場合は次のようになりますmargin-top: -200px;

<div id="container" style="position: fixed; top: 0px; left: 0px; width: 100%; height: 100%;">
<div id="otherstuff" style="position: fixed; top: 50%; left: 0px; width: 100%; height: 400px; margin-top: -200px;"> I am a verticall centered div! :)
</div>
</div>

次に、最初のレイヤーを通過した後のナビゲーションバーにもそれを配置しますposition: fixed;。上記のコードの上にあることを確認してください。このように下に表示されます。

<div style="position: fixed; top: 0px; left: 0px; height: 70px; width: 100%;">Your navigation content</div> 
<!-- THE CODE GIVEN ABOVE SHOULD GO HERE -->
于 2013-07-21T14:53:03.233 に答える