jquery - 使用 jquery .hide() 时修复页脚

Question

JsFiddle：

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

当一个人单击链接（底部的“损坏”图像）时，内容 div 应该刷新并显示新内容。但是您会看到页脚发生了什么：它随着动画一起上下移动。我需要将其固定到位。我将如何实现这一目标？

Position: fixed;或者absolute;似乎不适用于页脚类。

Answer 1

这在示例中有效

.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;
}

Answer 2

我必须将您.content的 div 包装在一个containerdiv 中，并将您的 div.navbar和.footerdiv 都包装在一个footercontainerdiv 中。

CSS：

添加position: relative;到.main以及将页脚 CSS 更改为：

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

最后为两个新的容器 div 添加 CSS：

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

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

​在这里摆弄。