[решено] Таблица: прижать футер к низу страницы

Ответить
Аватара пользователя
Qwe1

[решено] Таблица: прижать футер к низу страницы

Сообщение Qwe1 »

Есть таблица из трех строк: шапка - 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>



Работает, но если добавить, к примеру, такой заголовок:
Аватара пользователя
System Failure

Re: [решено] Таблица: прижать футер к низу страницы

Сообщение System Failure »

Попробуй так:



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>
Аватара пользователя
Qwe1

Re: [решено] Таблица: прижать футер к низу страницы

Сообщение Qwe1 »

По моему, valign здесь совершенно не при чем...

(Ты сам-то проверял свой код?)
Аватара пользователя
System Failure

Re: [решено] Таблица: прижать футер к низу страницы

Сообщение System Failure »

конечно проверял, погляди и ты. все норм. футер внизу страницы, шапка наверху - все остальное посередине.


Цитата Qwe1:



если добавить, к примеру, такой заголовок:
Аватара пользователя
Qwe1

Re: [решено] Таблица: прижать футер к низу страницы

Сообщение Qwe1 »

Добавляю в самое начало html-файла. И ты попробуй! Подробнее об этих заголовках (что это и зачем они нужны) см. на
http://www.w3.org
.
Аватара пользователя
Qwe1

Re: [решено] Таблица: прижать футер к низу страницы

Сообщение Qwe1 »

Разобрался. Воспользовался следующем способом: 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;
}
Ответить

Вернуться в «Вебмастеру»