0

我试图让我的页脚 (id="Footer") 的 div 距离屏幕底部 10 像素。例如，如果我的页面内容无法填满屏幕的高度，我希望 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;
}
4

2 回答 2

1

如果要修复css代码中的footer添加position: absolute和bottom: 10px后内容落在footer div下面的问题

您应该在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的高度设置为静态数字，因此它将是

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

希望对你有帮助

于 2013-06-29T05:49:49.427 回答
0

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

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

在您的 CSS 中，body 必须具有以下内容：

position:relative;

底部：0；无论如何都会将您的页脚置于底部。

于 2013-06-29T07:10:52.110 回答