0

Web サイトのフッターをページの下部に固定しようとしています。Firebug でいくつかの検査を行ったところ、現在、フッターが残りのサイト コンテンツと一緒にラップされていることがわかりました。

この時点での私の理論では、ページの高さを定義するコンポーネントが 100% に設定され、この要素の下にフッターが残されている場合、フッターはページの下部に固定する必要があります。

ここからどこに進むべきかまったくわからないので、誰かがコードを調べて、何を編集すればよいかを教えていただければ幸いです。

4

2 に答える 2

0

これは position:fixed; として設定する必要があるため、.css 内に #footer を追加/修正する必要があります。これを一番下に「貼り付ける」には、margin-bottom:0px; を追加する価値があります。または下：0px; これがページの一番下に触れ、幅を width:100% に設定するようにします。... .css で #footer を確認するか、これを以下のように追加して何が起こるかを確認できる場合は、そこから遊ぶことができます..

#footer {position:fixed; margin-bottom:0px; width:100%;}

height:***px; も実際に追加する必要があります。フッターの必要な「高さ」に応じて、この行がフッターの上部に達するまでこれをいじって、上下にスクロールしたときにページテキストがこの行に完全に一致するようにすることができます

于 2013-04-18T11:25:39.607 に答える
0

ここのスティッキー フッター コードの例に基づいて、ページのレイアウトを再編成することから始める必要があります。

サイトのコードは次のとおりです。

<div id="page" class="hfeed site">
    <header id="masthead">Header code</header>
    <div id="main">page body code</div>
    <footer id="colophon">footer code</footer>
</div>

私が送信したサンプル リンクを使用してスティッキー フッターを機能させるには、次のようなものを使用して Web サイト コードを再構築する必要があります (フッターが DIV の外にあることに注意してください)。

<div id="page" class="hfeed site">
    <header id="masthead">Header code</header>
    <div id="main">page body code</div>
</div>
<footer id="colophon">footer code</footer>

これに付随する CSS コードは次のようになります。

<style type="text/css">
html, body {height: 100%;}

#page {min-height: 100%;}

#main {overflow:auto;
    padding-bottom: 150px;}  /* must be same height as the footer */

#colophon {
    position: relative;
    margin-top: -150px; /* negative value of footer height */
    height: 150px;
    clear:both;} 

/*Opera Fix*/
body:before {
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;/
}
</style>

以前はスティッキーフッターを使用していましたが、WordPress Web サイトでは使用したことがないので、いじってみる必要があります。メインの HTML WordPress 要素を再編成するのは難しいかもしれませんが、正しい方向に向けられることを願っています。

于 2013-02-14T20:43:11.520 に答える