Question

我真正想要的是在页面的其余部分滚动时将页脚放在页面底部。这里没有任何答案我觉得令人满意。如果有人可以提供帮助，那就请。

修改

实际上我正在使用javascript动态修改body的DOM元素。所以我没有名为“内容”的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;是您案例中唯一的解决方案 see this demo

<强> 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

我的动态页脚

注意：在小提琴中，取消评论文本以查看在动态高度内容后伸展高度的页脚!!

<强> ========================== EDIT ================= =========

根据您的评论，这里是updated fiddle

========================== jQuery EDIT ================ ==========

使用 jQuery ，您可以实现目标... see fiddle

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 demo

保持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;
}

Live Example

使页脚粘在页面底部

3 个答案: