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之外。类似的东西应该是好的：

SAMPLE DEMO

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

页脚不会粘到底部

2 个答案: