Question

的jsfiddle：

当用户点击链接（底部的“已损坏”图片）时，内容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包装在container div中，并将.navbar和.footer div包装在footercontainer div中。

<强> 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 */
}

Fiddle here

使用jquery .hide（）时固定页脚

2 个答案: