ヘッダー、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 © 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;
}
ありがとうございました