Старый добрый футер внизу страницы!

psywalker · August 17, 2009

Сегодня прочитал вот эту статью http://habrahabr.ru/blogs/css/66805/ , тема вроде-бы заезжаная, но всё таки ещё актуальная, как мы видим. Для себя я доделал и решил, что буду всегда использовать именно такой метод http://psywalker.ru/Forum/shadow/Untitled-1.html Так вот вопрос: Чем мой метод хуже Хабрахабравского да и вообще какие минусы есть в моём методе прижимания Футера?

Tokolist · August 17, 2009

Само прижимание подвала противоречит идеологии верстки, поэтому лучше, если нет особой нужды, вообще не прижимать.

Если бы у меня не было выбора (прижимать таки нужно), то я бы использовал абсолютное позиционирование.

Почему? Просто оно, имхо, элегантнее.

psywalker · August 17, 2009

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

Ну а вот мой способ как вообще тебе: http://psywalker.ru/Forum/shadow/Untitled-1.html ???

Tokolist · August 17, 2009

Дык, у тебя и сделано абсолютным позиционированием, только с небольшой вариацией на тему.

На Хабре - через отрицательные марджины.

Оба способы известны давно и ничего лучшего пока никто не придумал (или я об этом не знаю )

Минус обеих - подвал должен иметь фиксированную высоту.

ЗЫ Это еcли не считать таблиц

Edited August 17, 2009 by Tokolist

psywalker · August 17, 2009

Минус обеих - подвал должен иметь фиксированную высоту.

А есть способы на чистом CSS, что-бы подвал был не фикс высоты?

Tokolist · August 17, 2009

А есть способы на чистом CSS, что-бы подвал был не фикс высоты?

Т.е. имеется ввиду без таблиц? Если и есть, то мне он не известен

psywalker · August 17, 2009

Т.е. имеется ввиду без таблиц? Если и есть, то мне он не известен smile.gif

Ну конечно же без таблиц Может кому нибудь известно всё же, надеюсь люди добрые помогут

Игорь Ермаков · August 17, 2009

Всегда прижимал его вытеснением за край экрана и отрицательным значением отступа сверху, но в большинстве макетов этого просто не нужно.

Great Rash · August 18, 2009

А есть способы на чистом CSS, что-бы подвал был не фикс высоты?

А вот так не катит?

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<title>Title</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}

		html,
		body {
			height: 100%;
			border: 0;
		}

		.cont {
			position: relative;
			min-height: 70%;
		}

		.footer {
			height: 30%;
			background: red;
		}
	</style>
</head>

<body>

	<div class="cont">
		111 <br />111 <br />111 <br />111 <br />111 <br />111 <br />111 <br />111 <br />111 <br />
	</div>
	<div class="footer"></div>

</body>
</html>

min-height вроде в ИЕ6 эмулируется экспрешнами, или я чего не понимаю?

DjTarik · August 18, 2009

Ну конечно же без таблиц Может кому нибудь известно всё же, надеюсь люди добрые помогут

Ну, по идее нельзя)

Еще в тему - всегда использовал способ с позиционированием - но после одного глюка в осле 6 перестал. А имеено - если на странице де-нить имеется яваскрипт, с помощью которого меняются стили в display; block; на display: none; или наоборот (смысл скрипта в том, чтобы получить эффект выпадающего блока, или менюшки) - "выпадающий блок" (если он находится недалеко от футера) будет выпадать именно под футер, несмотрся на то, что тот прижат к низу, а не растягивать страницу.

Решение может и есть - но на то время, потратив пару дней и ничего не нашев, забил на способ с позиционированием. Будет время - можно как-нить протестит эту ситуацию.)

Вот. А по всем остальным параметрам - позиционирование мне больше по душе...

psywalker · August 18, 2009

Great Rash

А вот так не катит?
Код
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Title</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
border: 0;
}
.cont {
position: relative;
min-height: 70%;
}
.footer {
height: 30%;
background: red;
}
</style>
</head>
<body>
<div class="cont">
111 <br />111 <br />111 <br />111 <br />111 <br />111 <br />111 <br />111 <br />111 <br />
</div>
<div class="footer"></div>
</body>
</html>
min-height вроде в ИЕ6 эмулируется экспрешнами, или я чего не понимаю?

1) Вот эти понты считаю ни к чему, поскольку для любого XML-документа кодировка UTF-8 предусматривается по умолчанию, мало того, что эта инструкция вгоняет ИЕ6 в quirks mode <?xml version="1.0" encoding="utf-8"?>

2) ИЕ6 не нужен экспрешн в данном случае, достаточно заменить min-height: 70%; на height: 70%;

3) И задача не совсем соответствует вопросу, хотелось бы получить футер, который легко можно будет изначально прижать к низу, но при этом не задавая ему Высоту, что-бы она сама менялась в зависимости от заполнения содержимым!

Great Rash · August 18, 2009

Вот эти понты считаю ни к чему, поскольку для любого XML-документа кодировка UTF-8 предусматривается по умолчанию, мало того, что эта инструкция вгоняет ИЕ6 в quirks mode <?xml version="1.0" encoding="utf-8"?>

Ниче, пусть будет. Я еще вреда от "понтов" не заметил пока. ИЕ6 в quirks mode (режим отладки чтоли?) пусть вгоняется, один хрен он XML-стиль не понимает.

ИЕ6 не нужен экспрешн в данном случае, достаточно заменить min-height: 70%; на height: 70%;

Эт верно, затупил.

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

А вот это ужо другое дело, тут подумать надобно... Чую без скриптов никак, хотя хз хз.

BassEast · August 18, 2009

Сегодня прочитал вот эту статью http://habrahabr.ru/blogs/css/66805/ , тема вроде-бы заезжаная, но всё таки ещё актуальная, как мы видим. Для себя я доделал и решил, что буду всегда использовать именно такой метод http://psywalker.ru/Forum/shadow/Untitled-1.html Так вот вопрос: Чем мой метод хуже Хабрахабравского да и вообще какие минусы есть в моём методе прижимания Футера?

ваш пример мне по душе. По-короче что-ли, и по-проще.

psywalker · August 18, 2009

Great Rash

Цитата
Вот эти понты считаю ни к чему, поскольку для любого XML-документа кодировка UTF-8 предусматривается по умолчанию, мало того, что эта инструкция вгоняет ИЕ6 в quirks mode <?xml version="1.0" encoding="utf-8"?>
Ниче, пусть будет. Я еще вреда от "понтов" не заметил пока. ИЕ6 в quirks mode (режим отладки чтоли?) пусть вгоняется, один хрен он XML-стиль не понимает.
Цитата
ИЕ6 не нужен экспрешн в данном случае, достаточно заменить min-height: 70%; на height: 70%;
Эт верно, затупил.
Цитата
И задача не совсем соответствует вопросу, хотелось бы получить футер, который легко можно будет изначально прижать к низу, но при этом не задавая ему Высоту, что-бы она сама менялась в зависимости от заполнения содержимым!
А вот это ужо другое дело, тут подумать надобно... Чую без скриптов никак, хотя хз хз.

1) Тогда в ИЕ6 много чего не будет корректно отображаться, и без того с ним проблем до жопы, сам знаешь. А потом и правда зачем эта инструкция нужна, если и без неё по умолчанию всё в норме?

2) Ерунда, бывает

3) Даа, тоже чую, что простым CSS тут не обойтись

BassEast

ваш пример мне по душе. По-короче что-ли, и по-проще.

Вот и я так же думаю, поэтому и решил на нём остановиться

Great Rash · August 19, 2009

Тогда в ИЕ6 много чего не будет корректно отображаться, и без того с ним проблем до жопы, сам знаешь. А потом и правда зачем эта инструкция нужна, если и без неё по умолчанию всё в норме?

ИЕ6 свое уже отжил, никто же не верстает по пятерку уже, вот и по шестерку пора бы перестать (что я с успехом и делаю). Ну да не в этом дело. Тип документа установлен как XHTML strict - значит мы переходим потихоньку от HTML к XML. Я конечно понимаю, что content="text/html" и text/xml даже не менее хреновая чем шестерка ИЕ7 не поймет, но раз уж у нас почти XML докумет, то давайте следовать его стандартам до конца.

Еще раз говорю, что лично я (хоть и под ИЕ6 почти не верстаю сейчас) проблем с quirks mode не заметил.

И вообще я сторонник того, чтобы делать сайты как гугль - то бишь на яваскрипте не закладываясь тупо на HTML и CSS. Имхо оно так гибче.

И вообще считайте меня коммунистом!

lyapiss · August 19, 2009

а при табличной вёрстке.

преположим таблица width=1000px размещена по центру тела и должна быть растянута на 100% по вертикали однако height=100% не работает ни в css ни в коде.

вот пример http://paricmaster.ru/

как быть?

Great Rash · August 19, 2009

Неправда, все работает:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<title>test</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />

	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}

		html,
		body {
			height: 100%;
		}

		table {
			height: 100%;
			border: 1px solid;
		}

		td {
			border: 1px solid;
		}

		.footer {
			height: 30px;
		}
	</style>
</head>

<body>

	<table>
		<tr>
			<td>111</td>
		</tr>
		<tr>
			<td class="footer">footer</td>
		</tr>
	</table>

</body>
</html>

Edited August 19, 2009 by Great Rash

lyapiss · August 19, 2009

Неправда, все работает:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<title>test</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />

	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}

		html,
		body {
			height: 100%;
		}

		table {
			height: 100%;
			border: 1px solid;
		}

		td {
			border: 1px solid;
		}

		.footer {
			height: 30px;
		}
	</style>
</head>

<body>

	<table>
		<tr>
			<td>111</td>
		</tr>
		<tr>
			<td class="footer">footer</td>
		</tr>
	</table>

</body>
</html>

а то что у меня другой доктайп: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> ?

Great Rash · August 19, 2009

Ну и что

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
	<title>test</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />

	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}

		html,
		body {
			height: 100%;
		}

		table {
			height: 100%;
			border: 1px solid;
		}

		td {
			border: 1px solid;
		}

		.footer {
			height: 30px;
		}
	</style>
</head>

<body>

	<table>
		<tr>
			<td>111</td>
		</tr>
		<tr>
			<td class="footer">footer</td>
		</tr>
	</table>

</body>
</html>

psywalker · August 19, 2009

Кстати у вас косяки в ИЕ, задача такова, что-бы средняя колонка тянулась до нижней(футера), который 30пк. А у вас выходит, что ячейки по 50% высоты, а должны быть: Верхняя 100%, а нижняя 30пк. Только чтобы всё это умещалось под высоту экрана чётко, как в ФФ например

lyapiss · August 19, 2009

Кстати у вас косяки в ИЕ, задача такова, что-бы средняя колонка тянулась до нижней(футера), который 30пк. А у вас выходит, что ячейки по 50% высоты, а должны быть: Верхняя 100%, а нижняя 30пк. Только чтобы всё это умещалось под высоту экрана чётко, как в ФФ например

у меня?

psywalker · August 19, 2009

Цитата(psywalker @ 19.8.2009, 16:20) *
Кстати у вас косяки в ИЕ, задача такова, что-бы средняя колонка тянулась до нижней(футера), который 30пк. А у вас выходит, что ячейки по 50% высоты, а должны быть: Верхняя 100%, а нижняя 30пк. Только чтобы всё это умещалось под высоту экрана чётко, как в ФФ например
у меня?

У обоих

lyapiss · August 19, 2009

У обоих

да теперь вижу. непонятно что делать.

причем http://validator.w3.org/ говорит This document was successfully checked as HTML 4.01 Transitional!

Edited August 19, 2009 by lyapiss

psywalker · August 20, 2009

Кстати вот этот вариант довольнотаки интересный, но по мне всю прелесть портит ИЕ6-7, ээх, а так жаль http://habrahabr.ru/blogs/css/67493/

Вадим · August 27, 2009

Странно получается... Если открыть http://psywalker.ru/Forum/shadow/Untitled-1.html в Opera 9.64, то есть глюк. Футер торчит ровно под конетнтом, когда нажмешь F5 футер прижимается вниз. У кого ещё также?

Информация о версии

Версия:

9.64

Сборка:

10487

Платформа:

Win32

Система:

Windows XP

Версия Java:

Sun Java Runtime Environment version 1.6

Модуль XHTML+Voice:

Плагин не загружен

Идентификация браузера:

Opera/9.64 (Windows NT 5.1; U; ru) Presto/2.1.1

Edited August 27, 2009 by Вадим

psywalker · August 27, 2009

Странно получается... Если открыть http://psywalker.ru/Forum/shadow/Untitled-1.html в Opera 9.64, то есть глюк. Футер торчит ровно под конетнтом, когда нажмешь F5 футер прижимается вниз. У кого ещё также?

Да, я тоже замечал этот эффект в Опере, долго парился над ним и пришёл к выводу, что это Баг Оперы, за что кстати я поставил им жирный минус при их то громких заявлениях, что они проходят все возможные тесты и т. д.

Sign In

Старый добрый футер внизу страницы!

Question

Link to comment

Share on other sites

31 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information