Question

我创建了一个HTML页面，其中包含一个标题，3列（左，右和右）和一个页脚。在主栏中，我有一张高度为100％的桌子，非常大。现在我想把我的页脚放在桌子底下。

我不知道出了什么问题，但我的页脚没有放在底部，在我的情况下，它几乎位于主桌的中间。

html，body和main class也设置为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;
       }

谢谢

Answer 1

尝试：

#footer{
    position:absolute;
    bottom: 0px;
    text-align: center;
}

Answer 2

使用

bottom: 0;

而不是

margin-bottom: 0;

我认为这对你有用。

HTML页脚不会停留在页面底部

2 个答案: