0

もう 1 つの「スティッキー フッター」の問題です。

HTML:

<body id="mainbody">
<div class="wrapper">
<div id="header">
</div>
<div id="navbar">
</div>
<div id="sidebar">
</div>
<div id="content">
</div>

<div class="push"></div>

</div>

<div class="footer">
<p>&copy LOREM IPSUM DOLOR ...</p>
</div>

CSS:

    .footer {
        text-align:center;
        color:#ffffff;
        position: relative;
        z-index: 10;
        margin-bottom: 0px;
        line-height:30px;
        width:1100px;
        left:100px;
        border:1px solid #777777;  
        background:#261f1f;
        -moz-border-radius:5px;
        -webkit-border-radius:5px;
        border-radius:5px;
        -moz-box-shadow: 5px 5px 5px #000000;
        -webkit-box-shadow: 5px 5px 5px #000000;
        box-shadow: 5px 5px 5px #000000;
    }
    /*Footer to buttom*/
    html, body {
    height: 100%;
    }
    .wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -32px;
    }
    .footer, .push {
    height: 30x;
    clear:both;
    }

このサイトや他のサイトで多くの投稿を読みました。position: fixed in footer を使用すると、フッターがブラウザーの「ウィンドウ」または「画面」の下部にくっつきます。再スケーリングしても移動しても、そこに残ります。これはメインコンテンツをカバーしますが、少なくとも常に一番下に留まります

position: relative; を使用する場合 スクロールバーが上にある場合は、下にとどまります。しかし、バーを下にスクロールすると、フッターはメインコンテンツの上に移動し、下部には移動しません。

ここに画像の説明を入力

私はどんな間違いをしましたか？ページのすべてのコンテンツの下にフッターを配置したい。

使用するとどうなるかfixed: ここに画像の説明を入力

4

4 に答える 4

2

これを試してみてください.....

body {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0;
    margin: 0;
}

#footer {
    position: absolute;
    bottom: 0;
}
于 2013-07-20T09:36:17.797 に答える
1

この CSS を使用します。

position: fixed;
bottom: 0;
width: 100%;
于 2013-07-20T09:25:13.757 に答える
1

タグfooterを使用します。これにより、このタグのコンテンツがウィンドウではなくページの下部にくっつきます

<footer>
    <div class="footer">
        <p>&copy LOREM IPSUM DOLOR ...</p>
    </div>
</footer>

w3schools : LINK

更新:
次のスクリプトを追加します。 

  $(document).ready(function(){
        if( $(document.body).height() < $(window).height() )
        {
            $("div.footer").css("top" , $(window).height() - $("div.footer").outterHeight() + "px");
        }
    });

.footerまた、CSSの位​​置関連のプロパティ フォームをすべて削除します。

于 2013-07-20T09:43:00.437 に答える