使页脚停留在页面底部

Question

我真正想要的是在页面其余部分滚动时使页脚位于页面底部。 我没有一个令人满意的答案。 因此，请有人帮助。

编辑

实际上，我正在使用javascript动态修改body的DOM元素。 因此，我没有一个名为“ content”的div。 即我的HTML文件的结构将是这样的：

<body> 

---- body ----- 

<div id="footer">
  My Dynamic Footer
</div> 
</body>

Answer 1

#footer { 
    position: fixed;
    bottom: 0;
    left: 0;
}

Answer 2

position: fixed; 是您唯一的解决方案， 请参见此演示

CSS

    html, body, #container {
    height: 100%;
    margin:0;
    padding:0;
}
#footer {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 10;
    height: 3em;
    width:100%;
    background-color:grey;
}

HTML

我的动态页脚

注意：在小提琴中，取消注释文本以查看在动态设置高度后页脚会拉伸高度！！

==========================编辑======================= ===

根据您的评论，这是更新的小提琴

======================================================================================= ====

使用jQuery就可以实现目标...... 看到小提琴

需要JQ：

$( "<div class='space'></div>" ).insertBefore( "#footer" );

CSS

html, body {
    height: 100%;
    margin:0;
    padding:0;
}
.space
{
    height:6em; /* this is problem solver */
}
#footer {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 10;
    height: 3em;
    width:100%;
    background-color:grey;
}

==========================使用JAVASCRIPT的最终编辑==================== ======

javascript演示

保持以上HTMl标记不变，请使用以下javascript来解决您的问题：

var link = document.getElementById("footer")
var new_node = document.createElement("div");
new_node.className="space";
new_node.innerHTML = "";
link.parentNode.insertBefore(new_node, link.nextSibling);

Answer 3

我要添加的一件事是在页margin-bottom以便页脚到达页面底部时不会隐藏任何内容。

.content {
  margin-bottom: 200px;
}
footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 200px;
}

现场例子

使页脚停留在页面底部

问题描述

3 个解决方案

解决方案1
3 2013-12-28 05:20:53

解决方案2
2 已采纳 2013-12-28 05:57:17

解决方案3
1

使页脚停留在页面底部

问题描述

3 个解决方案

解决方案1 3 2013-12-28 05:20:53

解决方案2 2 已采纳 2013-12-28 05:57:17

解决方案3 1

解决方案1
3 2013-12-28 05:20:53

解决方案2
2 已采纳 2013-12-28 05:57:17

解决方案3
1