0

我制作了一个包含页眉、3 列（左、主和右）和页脚的 HTML 页面。在主列中，我有一个高度为 100% 的表格，非常大。现在我想把我的页脚放在桌子下面。

我不知道出了什么问题，但我的页脚没有放在底部，就我而言，它几乎位于主表的中间。

html、body 和 main 类也设置为 100% 的高度，这样可以完美运行。唯一的问题是页脚..

根据要求，这里有更多代码：

<body>  
<div id="wrap">
<div id="hoofding"></div>
<div id="inner-wrap">
<div id="navigatie" style="font-family:old stamper">
  <a href="index.html" class="C1"><font size="9">Home</font></a>
</div>
<div id="main">
<div id="right"></div>
<table id= "tabel1">
 <div id="inhoud">
<tr><td><p style="font-family:army of darkness"><font size="30">Lettertype 1: The Quick Brown Fox</font></p></td></tr>              
<tr><td><p style="font-family:USSR army"><font size="30">Lettertype 2: The Quick Brown Fox</font></p></td></tr>
 </div>
</table>
</div>
</div>
</div>
<div id="footer"><font size="1">Copyright &copy 2013 The Pack</font></div>
 </body>

和 CSS 文件：

    html {height:100%; width: 100%;}

    body {
  margin:0; 
  padding:0; 
  height:100%;
  width: 100%;
  background-color: blue;
  } 

    #hoofding{
  margin-right: auto;
  margin-left: auto;
  height: 355px;
  width: 620px;
  background-image: url(Afbeeldingen/The%20Pack.png);
  }
    #navigatie{
      z-index: 15;
      position: fixed;
  height: 50px;
  width: 8%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 1%;
  padding-left: 1%;
   }
#inhoud{
      z-index: 2;
  position: absolute;
  padding-top: 3%;
  padding-bottom: 3%;
   }

   #tabel1{
      height: 100%;
  width: 70%;
  z-index: 1;
  background-image: url(Afbeeldingen/Inhoud.png);
  margin-left: auto;
  margin-right: 15%;
  bottom: 0;
  padding:15px;
  }

    #wrap {
      position:relative;
      min-height:100%;
        }
    * html #wrap {height:100%; width:100%}

     #inner-wrap {
        padding-bottom:20px;
       }
     #inner-wrap:after {
       content:" ";
       display:block;
       clear:both;
        }
     #footer {
        position:absolute;
        height:18px;
        background-color: red;
        bottom:0px;
        color:white;
        text-align:center;
        clear:both;
          }

    #left {
      position:fixed;
      float:left;
      width:10px;
      text-align:center;
        }
    #main {
      position:absolute;
      margin-left:10px;
      margin-right:10px;
      width: 100%;
      height: 100%;
        }

   #right {
      float:right;
      width:10px;
      text-align:center;
       }
   #content {
     padding:5px;
     margin-right:10px;
     text-align:left;
       }

谢谢你

4

2 回答 2

0

尝试：

#footer{
    position:absolute;
    bottom: 0px;
    text-align: center;
}
于 2013-06-11T17:39:58.040 回答
0

利用

bottom: 0;

而不是

margin-bottom: 0;

我认为它会为你工作。

于 2013-06-11T17:40:55.573 回答