jquery - jquery .hide() 使用時のフッターの修正

Question

Jsフィドル:

http://jsfiddle.net/7y6n5/2/

ユーザーがリンク (下部の「壊れた」画像) をクリックすると、コンテンツ div が更新され、新しいコンテンツが表示されます。しかし、フッターで何が起こっているかがわかります。フッターはアニメーションとともに上下に移動します。固定する必要があります。どうすればそれを達成できますか？

Position: fixed;またはabsolute;フッタークラスで動作していないようです。

Answer 1

あなたの.contentdiv を div でラップし、あなたとcontainerdiv の両方を div でラップする必要がありました。.navbar.footerfootercontainer

CSS :

フッター CSS を次のように追加およびposition: relative;変更します。.main

.footer {
    padding: 0;
    font-size: 11px;
    margin: 5px 0;
    text-align: center;
    color: #505050;
}

最後に、2 つの新しいコンテナ div の CSS を追加します。

#container {
    padding-bottom: 30px;  /* padding for the footer */
}

#footercontainer {
   position:absolute;
   bottom:0;
   width:100%;
   height:30px;   /* Height of the footer */
}

ここでフィドル。

Answer 2

これは例で機能します

.footer {
    background: #000;
    margin: 0;
    padding: 0;
    text-align: center;
    font-size: 11px;
    margin-top: 5px;
    color: #505050;
    position :fixed;
    bottom:0;
    left:0;
    right:0;
}