页脚不会落到页面底部

Question

使用此页脚有一段时间了。直接 link 到页面 here。应该有两种页脚状态：

当内容高度小于页面高度时，页脚应该贴在 window 的底部，就像目前一样
当内容高度大于 window 高度时（见图），页脚不会落到内容底部。

1. 有效，但 2. 无效。图片here of the issue and this is what happens when you scroll pic 任何想法如何解决？

CSS:

footer {
   width: 100%;
   float: left;
   clear: both;
   height: 50px;
   position: relative;
   bottom: 0;
   overflow: hidden;
   margin-top: -50px;
}

Answer 1

问题不在于页脚 div，问题在于预览 DOM 元素 #wrapper

将 #wrapper 的 height 属性更改为 min-height

#wrapper {
   min-height: 100%;
}

我也没什么建议，float 和 clear 没有意义 footer 删除它。

页脚不会落到页面底部

footer not falling to bottom of page

html

css