-
Вебмастеру
(
http://forum.oszone.net/forumdisplay.php?f=22)
Таблица: прижать футер к низу страницы
Есть таблица из трех строк: шапка - 100 пикселей, контент (должен растягиваться) и футер c контактами и т.д. - тоже 100 пикселей. Надо, чтобы шапка была в самом верху, футер в самом низу, а все остальное между ними.
Делаю так:
HTML код:
<html>
<head>
<title></title>
</head>
<body>
<table height="100%" width="100%" border="2">
<tr>
<td height="100">Шапка</td>
</tr>
<tr>
<td>Содержимое</td>
</tr>
<tr height="100">
<td>Футер</td>
</tr>
</table>
</body>
</html>
Работает, но если добавить, к примеру, такой заголовок: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN", то ничего не работает! То есть, где-то идет нарушение стандарта... Можно ли сделать все тоже самое, только по всем правилам и т.д.??? |
| System Failure |
17-11-2007 22:18 680555 |
Попробуй так:
HTML код:
<html>
<head>
<title></title>
</head>
<body>
<table height="100%" width="100%" border="2">
<tr>
<td height="100" valign="top">Шапка</td>
</tr>
<tr>
<td>Содержимое</td>
</tr>
<tr valign="bottom" height="100">
<td>Футер</td>
</tr>
</table>
</body>
</html>
|
По моему, valign здесь совершенно не при чем...
(Ты сам-то проверял свой код?)
|
| System Failure |
18-11-2007 11:24 680767 |
конечно проверял, погляди и ты. все норм. футер внизу страницы, шапка наверху - все остальное посередине.
Цитата:
Цитата Qwe1
если добавить, к примеру, такой заголовок: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" »
|
а куда ты это дело добавляешь? у меня все аботает... |
Добавляю в самое начало html-файла. И ты попробуй! Подробнее об этих заголовках (что это и зачем они нужны) см. на http://www.w3.org. |
Цитата:
Цитата Qwe1
<table height="100%" width="100%" border="2"> »
|
попробуйте CSS
HTML код:
<table style="width: 100%; height: 100%; border-width: 2px;">
|
Разобрался. Воспользовался следующем способом: footer прижимается вниз за счет вытягивания блока контента на всю высоту окна браузера и подъема футера вверх через отрицательный отступ для избавления от появляющегося при этом вертикального скролла. В данном случае нужно обязательно указывать высоту подвала.
Фрагмент кода:
HTML код:
<html>
<body>
<div id="content">
<div id="text"></div>
</div>
<div id="footer"></div>
</body>
</html>
HTML код:
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
#content {
position: relative;
min-height: 100%;
}
* html #content {
height: 100%;
}
#text {
padding-bottom: 100px;
}
#footer {
position: relative;
height: 80px;
margin-top: -80px;
}
|
Время: 22:52.
© OSzone.net 2001-
