css - 如何为网页页脚制作完美的div？

Question

我试图让我的页脚 (id="Footer") 的 div 距离屏幕底部 10px。比如我的页面内容不能填满屏幕的高度，我希望div距底部10px。

如果我的页面内容超出屏幕底部(创建滚动区域)，我希望 div 仍然位于底部，距离底部有 10px 的边距。

我正在使用 position: absolute但如果内容超出页面屏幕高度，这会导致我的内容落在页脚 div 下方。

HTML: <div id="Footer" > <table> <tr> <td>&copy; Copywright 2012 Company. All Rights Reserved</td> </tr> </table> </div>

CSS:

#Footer  table {
   width: 100%;
   max-width:1250px;
   bottom:0px;
   height:30px;   /* Height of the footer */
   font-weight:bolder;
   background-color: black;
   margin-left: auto;
   margin-right: auto;
    text-align:center;
    color: white;
    font-size:20px;
    border: 3px white solid;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;  
} 
#Footer  {
    clear: both;
    position: absolute;
    bottom: 10px;
    background-color: #15317E;
    clear: both;
    width: 1250px;
}

Answer 1

如果你想解决在footer添加position: absolute和bottom: 10px后导致内容落在footer div下面的问题> 在 css 代码中

你应该在body中添加一些css代码，所以它应该是这样的

body{
    position: relative; /* to make footer in the bottom of the body*/
    padding-bottom: 45px;  /*footer heigh + 10px*/
    margin: 0; /*to make footer fill the screen width without scroll*/
}

此外，您还需要将页脚的高度设置为一个静态数字，这样它将是

#Footer {
    position: absolute;
    bottom: 10px;
    background-color: #15317E;
    width: 100%;
    height: 35px;
}

希望对你有帮助