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