Эпопея борьбы с футером. Как прижать его к низу, но не как у всех?

Question

[Фаниль Зубаиров]

Всем привет. Не могу добиться такого вот результата:

Перепробовал многое, в том числе такой вариант:

<div class="wrapper">
	<div class="header">
	...
	</div>
	<div class="content">
		<div class="left">
		...
		</div>
		<div class="right">
		...
		</div>
	</div>
</div>
<div class=""footer">
...
</div>

И стили к нему (в примере приведены только основные стили):

body,html {
	height: 100%;
}
.wrapper {
	min-height: 100%;
	margin: 0 auto -60px;
}
.header, .footer {
	height: 60px;
}
.content {
	width: 980px;
}

Но .content не хочет занимать все доступное ему место по высоте. height: 100% не подходит, потому что у родителя не конкретного значения высоты.

Answer 1

[Фаниль Зубаиров]

Мои эксперименты, кстати, привели к вот этому: jsfiddle.net/bSKS7
Кто прокомментирует?

//UPD
Лучшим решением так и остается вот этот вариант:
jsfiddle.net/4sx4q/1
У кого-нибудь есть идеи, как улучшить код, избавиться от z-index'ов? Без js, естественно :)

Comments

[Юрий Лобанов]

и чем он отличается от моего варианта? Тем, что нагородили еще несколько внутренних контейнеров? Проблему с большим контекстом решили точно также - никак :)

[Юрий Лобанов]

Смотрите в сторону использования js. Парой строчек решите все проблемы.

[Фаниль Зубаиров]

Не проверял код перед отправкой. Да, там ужас :)

[personaljs]

jsfiddle.net/bSKS7/1

Answer 2

[Анна Бакурова]

Внимание! крайне не советую прижатие футера к низу через css вот этим способом! Ловите код и всегда прижимайте его js-ом
//fixed footer
if($(".footer").offset().top+$(".footer").outerHeight()<$(window).height())
$(".footer").css({
position: "absolute",
width: "100%",
bottom: 0
});

Comments

[Анна Бакурова]

ещё лучше если Вы будете присваивать класс с такими параметрами css а не писать их в js, но это уже на вкус и цвет...

[Фаниль Зубаиров]

Спасибо!

[personaljs]

а без jquery покажите код?

[Анна Бакурова]

тут парень уже кидал mystrd.at/modern-clean-css-sticky-footer

[Анна Бакурова]

Просто при вашем способе у нас область body будет не во весь документ а во весь экран что по вёрстке не верно и может привести и ошибкам

[Анна Бакурова]

Тот что в комментариях тут есть способ без js он даже лучше моего чистый CSS это четвертый комментарий в этом ответе

Answer 3

[Юрий Лобанов]

jsfiddle.net/iiil/ZMDb7/1

но
jsfiddle.net/iiil/ZMDb7/2 :)

В общем, приведенный пример Вами решит проблему для контента высотой больше, чем страница. Но чтобы высота контентной части всегда была равна высоте страницы - используйте js.

Comments

[Фаниль Зубаиров]

Подходит. Благодарю.

Answer 4

[Назар Мокринский]

Вот надежный и рабочий вари...

Comments

[Анна Бакурова]

Так это одно и тоже что Я кидала только без js хотя надо бы

[Назар Мокринский]

@Libris JS - плохая идея:
1) Нужно вешать событие на resize для того чтобы учитывать изменение ориентации мобильного телефона/планшета
2) При изменении размера окна будет дергаться
3) Лишний ненужный костыль

Answer 5

[Руслан]

Не подходит?

Comments

[Фаниль Зубаиров]

Вы видимо не совсем поняли суть задачи: футер постоянно внизу, контентная часть на всю доступную высоту документа. В приведенном вами примере я такого не увидел.

Answer 6

[Евгений]

Очередной пример какой html убогий.

Answer 7

[personaljs]

какой js???? вот держи
jsfiddle.net/ZMDb7/3

Comments

[Анна Бакурова]

body,html {
min-height:100%;
height: 100%;
}
body height 100%. Вот это минус этого способа. Вы можете посмотреть как ведёт себя боди там растяжка идёт на 100% экрана а не документа. Если и прописывать такой способ то только в тег noscript. Если кто то будет при css прижатии футера присоединять плагин например фенси бокса то при открытии картинки пользователя кинет наверх страницы и это не единственный плагин который ведёт себя не очень приятно при таком css. В конце концов это не правильно когда в зоне боди какой-то части сайта

[Юрий Лобанов]

@becon
Вы бы хоть задание посмотрели :) Две ссылки и обе с неправильными ответами.

Answer 8

[Иван]

Ну так www.xiper.net/collect/html-and-css-tricks/karkas-v...
Верхние 3 блока с вашей картинки в верхний блок, нижний в нижний.

Comments

[Анна Бакурова]

Вы бы прочитали хоть прошлые комменты))) Я уже второму человеку пишу минусы этого способа

[Назар Мокринский]

@Libris Ваш совет ещё хуже)

[Анна Бакурова]

@nazarpc а этот вариант неверный и Я уже говорила что баги могут появится при подключение плагинов (всплывашек). Тем более то что Вы пишите уже упоминалось. "Ваш" вариант стоит использовать только в noscript

[Анна Бакурова]

точнее не Ваш а этот (под которым сейчас комменты)

Answer 9

[telegraphnij_stolb]

Вот 100%-ый вариант: peterned.home.xs4all.nl/examples/csslayout1.html