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

Question

我正试图让我的页脚div（id =“Footer”）从我的屏幕底部变为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

如果要在位置：绝对和底部：10px 添加到页脚在 css 代码中

你应该在正文中添加一些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;
}

希望它能帮到你

Answer 2

在CSS文件中，将#Footer更改为以下代码：

#Footer  {
    clear: both; /*may be omitted*/
    position: absolute;
    bottom: 0; 
    background-color: #15317E;
    width: 100%;
    height: 40px; /* or anything you like */
 }

在CSS中，正文必须包含以下内容：

position:relative;

底部：0;无论如何，都会将你的页脚放在底部。