Нижний колонтитул HTML не находится внизу страницы

77
8

Я создал HTML-страницу, содержащую заголовок, 3 столбца (слева, справа и справа) и нижний колонтитул. В главном столбце у меня есть таблица высотой 100%, поэтому довольно большая. Теперь я хочу, чтобы мой нижний колонтитул под столом.

Я не знаю, что не так, но нижний колонтитул не расположен внизу, в моем случае он находится почти в середине основного стола.

Html, body и основной класс также установлены на высоту 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;
}

Спасибо

спросил(а) 2013-06-11T20:27:00+04:00 7 лет, 1 месяц назад
1
Решение
55

использование

bottom: 0;

скорее, чем

margin-bottom: 0;

Я думаю, это сработает для вас.

ответил(а) 2013-06-11T20:40:00+04:00 7 лет, 1 месяц назад
39

Пытаться:


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

ответил(а) 2013-06-11T20:39:00+04:00 7 лет, 1 месяц назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема