waitekk 28 мар 2010 в 12:51

CSS Sticky Footer — новая версия

1 мин

4.2K

CSS *

Комментарии 21

lampslave 28 мар 2010 в 13:41

Интересное решение, спасибо.
Сам я обычно пользуюсь другим методом.

ArtyV 29 мар 2010 в 05:16

Этот хуже

TiGR 28 мар 2010 в 14:48

Интересно, как оно будет работать, если у враппера есть повторяющееся по вертикали фоновое изображение.

В ряде браузеров при наличии такой картинки фоновое изображение отображается только на 100% высоту окна. Так что если страница длинная, появляется этот глюк.

НЛО прилетело и опубликовало эту надпись здесь

TiGR 28 мар 2010 в 20:37

При height:auto ещё не пробовал. Просто у меня был старый рабочий вариант в наработках, а тут в одном проекте столкнулся с необходимостью воткнуть бэкграунд, и как-то оно перестало работать.

PycmaM 28 мар 2010 в 17:12

О, не знал, что этой поблеме посвящен отдельный сайт с решением :) Спасибо, в закладки добавил, а то каждый раз приходилось гуглить (:

rmaksim 30 мар 2010 в 17:59

сори за офтоп
каждый раз ??? — это сколько раз!!!
разобравшись один раз можно запомнить как делал, или ты просто копипастил, распечатывал на всяк пожарный, стирал все файлики с диска, а потом заодно и сжигал то что распечатал?
не, ну мне просто интересно

PycmaM 30 мар 2010 в 18:28

ну, верстать с нуля приходится редко, поэтому как-то «выветривается» из головы :) а найти в гугле оказывается быстрее, чем искать по старым проектам

cashby 28 мар 2010 в 19:42

Эх… XXI век, в то время, как космические корабли бороздят просторы вселенной, верстальщики все-также мучаются с хаками под разные броузеры…
Извините, вспомнилось что-то…

НЛО прилетело и опубликовало эту надпись здесь

lampslave 28 мар 2010 в 20:36

Есть и другой способ. Мне кажется, что он более реален ;)

Всем верстальщикам собраться и хором забыть про браузеры, которые не поддерживают display: table. colspan и rowspan изобразить не удастся, но для не очень сложных каркасов хватит и того, что есть сейчас.

НЛО прилетело и опубликовало эту надпись здесь

lampslave 28 мар 2010 в 21:00

*lampslave опускает глаза и кается в том, что почти не следит, чем занимается W3C и какие есть наработки в области раскладок…

Может это потому, что для «рюшечек» и «мультиков» костыли ещё хуже, чем для раскладок?

НЛО прилетело и опубликовало эту надпись здесь

ArtyV 29 мар 2010 в 05:05

Хаха! В IE8 при вертикальном ресайзе не рефловица, ещё пилить : )

GruZZ 29 мар 2010 в 13:17

В очередной раз открыли Америку…
Хотя автор CSS Sticky Footer молодец, я бы не смог проверить верстку в 50 браузерах и додуматься до такого извращенного фикса для Opera. А вот смысл хака для IE8 мне не до конца понятен. Кто-нибудь объяснит?

Delka 29 мар 2010 в 19:12

я такой вариант юзаю:

<!DOCTYPE>
<html lang="en-us">
<head>
  <title></title>
  <style type="text/css">
  /*<![CDATA[*/
  html {height: 100%;}
  body {margin: 0 auto; padding: 0 30px; position: relative; min-height: 100%; _height: 100%; width: 900px;}
    #content {padding-bottom: 120px;}
    #bottom  {position: absolute; bottom: 0px; left: 30px; height: 120px; width: 900px;}
  /*]]>*/
  </style>
</head>
<body>
  <div id="content">
    It's content
  </div>
  <div id="bottom">
    It's footer
  </div>
</body>
</html>

люблю чтоб было строго ясно и логично.
прибивание подвала — это позиционирование, так давайте юзать position.

Panya 29 мар 2010 в 19:23

Этот вариант глючит в IE7-, если #content что-то будет меняться через JS (динамически меняться высота), в этом случае футер будет висеть в том же месте, а не прибитым к низу. Вариант из поста очень хороший, но IE8 снова подложил свинью.

Delka 29 мар 2010 в 19:36

баг со сменой высоты, я решал делая reflow: в самом конце выполнения js-функции, которая что-то меняет дописывал что-то типа
$bottom.style.zoom=1; (или position=relative, или background-color / много разных безобидных свойств вызывают перерисовку) с паузой в пол-секунды.

да лучше пусть уж в ie6 глючит чем в нормальных браузерах, тем более под них хаки писать)
через год-два забудем что такое ie6 на большинстве проектов.

Panya 29 мар 2010 в 19:42

Рефлов через js, это да. Поскорее бы все стали поддерживать CSS3 модули flexbox и layout) Но это еще совсем-совсем нескоро. Возможно даже и верстать тогда уже не придется или не захочется :)

zanner 3 апр 2010 в 00:27

Я скажу проще — кого так параноедально беспокоет не дать скрпитам отследить где он был — всегда может отключить JS в том же FF есть замечательный «noscript», или поставить 0 память для посещенных адресов, но кастрировать функционал, причем так нелепо — это просто непрофессионально!!!

Зарегистрируйтесь на Хабре, чтобы оставить комментарий