21

高さ63pxの固定ヘッダーが上部にあるページがあります。この下には、本質的に別々のページであるページ (div) のさまざまなセクションがあります。各セクションは、関連する div id へのアンカー リンクとしてヘッダーにリンクされています。私が抱えている問題は、アンカー リンクをクリックすると、div の上部がヘッダーの下ではなく、ドキュメントの上部から始まることです。どんな解決策も確かに非常に役に立ちます。

ヘッダーの CSS コード:

#headercontainer{
position:fixed;
background-color:#1a1813; 
top:0px;
left:0px;
width:100%;
height:63px;
z-index:1;}

#headercontent{
position:relative;
background-image:no-repeat; 
top:0px;
left:0px;
width:1280px;
margin-left:auto;
margin-right:auto;}

最初のセクションの CSS コード (アンカーがクリックされたときにヘッダーの下にある必要があります。

#landingcontainer{
margin-top:63px;
position:relative;
width:100%;
height:700px;
background-color:#000000;}

#landingcontent{
position:relative;
width:1280px;
height:700px;
margin-left:auto;
margin-right:auto;
background-image:url("../images/landing/landing_bg.png");
background-repeat:no-repeat;

}

要点までの HTML:

<!-- START BODY CONTAINER -->
<div id="bodycontainer">
    <!-- START HEADER -->
    <div id="headercontainer">
        <!-- START HEADER CONTENT -->
        <div id="headercontent">
            <div id="headerbg">
                <a href="#landingcontainer"><div id="headerlogo"></div></a>
                <div id="headercard"></div>
                <div id="headernavigation">
                    <ul>
                        <a href="#menucontainer"><li>Menu</li></a>
                        <li>Sauces</li>
                        <li>Ranches</li>
                        <li>Order</li>
                        <li>Franchise</li>
                        <li>About</li>
                    </ul>
                </div>
                <div id="headersociallinks"></div>
            </div>
        </div>
        <!-- END HEADER CONTENT -->
    </div>
    <!-- END HEADER -->

    <!-- START LANDING SECTION -->
    <div id="landingcontainer">
4

4 に答える 4

49

私はこの問題に対してさらに良い解決策を持っています。

•最初に、cssでクラスを作成できます（好きなように呼んでください）

.anchor{
   display:block;
   height:63px; /* this is the height of your header */
   margin-top:-63px; /* this is again negative value of the height of your header */
   visibility:hidden;
}

•実際のdivセクションが始まる直前のHTMLで、たとえば私の#landingcontainer場合、アンカーのクラス（上記で作成）と任意のIDを持つspanタグを追加する必要があります。私のために私はこれをしました：

<span class="anchor" id="landing"></span>

そうすると、実際のリンクは、移動先のセクションの実際のdiv IDにリンクされなくなりますが、スパンタグのIDをリンクで指定する必要があります。

<a href="#landing">HOME</a>

そして、あなたはそれを持っています！

ここで本質的に行っているのは、スパンが開始する場所でブラウザーを停止させることです。これは、ヘッダーの高さとまったく同じであり、これにより、ビューアーは賢くなりません;）

于 2012-10-23T19:30:20.707 に答える
1

padding-top: 63px;アンカーリンク先の要素に a を追加するだけです。つまり、ある仮説<div id="sauceslanding">では、 の CSS に#sauceslanding { padding-top: 63px; }のリンクが設定され<a href="#sauceslanding">Sauces</a>ます。

それをテストしましたが、これは私にとってはうまくいきます。うまくいかない場合は、jsfiddle またはライブ テストを作成して、コードのどこかに問題があるかどうかを確認してください。

アップデート

これがある場所：

#menucontainer{
    position:relative;
    width:100%;
    height:700px;
    background-color:#1d0f00;
    padding-top:63px;
}
/* END MENU CONTAINER */

/* MENU CONTENT */
#menucontent{
    position:relative;
    width:1280px;
    height:700px;
    margin-left:auto;
    margin-right:auto;
    background-image:url("../images/menu/menu_bg.png");
    background-size:cover; 
    background-repeat:no-repeat;
}

これを更新します：

#menucontainer{
    position:relative;
    width:100%;
    height:700px;
    background-color:#1d0f00;
    padding-top:63px;
    background-image:url("../images/menu/menu_bg.png");
}
/* END MENU CONTAINER */

/* MENU CONTENT */
#menucontent{
    position:relative;
    width:1280px;
    height:700px;
    margin-left:auto;
    margin-right:auto;
    background-size:cover; 
    background-repeat:no-repeat;
}

その場合、画像の上部がパディングがないかのように切り取られることがわかります。次に、背景画像を変更して 63 ピクセルのデッド スペースを追加します (フェンス パターンを北に拡張します)。その後、あなたは行ってもいいです。

于 2012-10-23T18:14:31.557 に答える