html - 页脚不粘在底部

Question

我正在处理struts2应用程序。当我处理jsp页面时发生了一个问题，当页面内容较少时，页脚浮动在内容下方，这看起来很糟糕。但是当内容超过页面时，它会自动浮动到底部.这对我来说没问题。任何帮助将不胜感激...

CSS中用于页脚的代码是......

#footer {
    height:41px;
    background:url(../images/main-bg.png) repeat-x;
    width: 100%;
}

Answer 1

对于粘性页脚（始终位于页面底部，无论页面高度如何），请使用position: fixed;

   #footer {
     height:41px;
     background:url(../images/main-bg.png) repeat-x;
     position: fixed;
     bottom: 0;
     width: 100%;
   }

Answer 2

如果您正在寻找使页脚始终在不受滚动影响的浏览器窗口上可见，那么position:fixed就可以了。但是，当内容更多并且您需要滚动并且页脚仍然停留在与内容重叠的查看区域时，这看起来会很糟糕。一个干净的解决方案是将页脚标记移到包装器 div 之外。像这样的东西应该很好：

示例演示

CSS-

html, body {
    height: 100%;
}
#wrapper {
    background-color:yellow;
    height: 90%; //sharing the height between wrapper and footer
    margin:0px;
}
#footer {
    background-color:green;
    height: 10%;
    min-height:20px;
    max-height:40px;
}