Footer at bottom

mishka · December 12, 2009

На этом форуме, да и на многих сайтах приводится пример прибивания футера к низу екрана. И многие сталкивались с проблемой что в опере это не работает.

Изучив код из сообщения Scrum ( http://forum.htmlbook.ru/index.php?s=&...st&p=123368 )

я пришел к такому коду

<!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">
<head>
	<title>footer at bottom</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<style type="text/css">
	html{
		overflow:auto;
		height:100%;
	}
	body{
		margin:0;
		height:100%;
	}
	#wrapper{
		background:#ffd476;
		min-height:100%;
	}
	* html #wrapper{
		height:100%;
	}
	#page{
		width:100%;
		overflow:hidden;
		padding:0 0 100px;
	}
	#footer{
		height:100px;
		overflow:hidden;
		position:relative;
		background:#5487d3;
		margin:-100px 0 0;
	}
	</style>
</head>
<body>
	<div id="wrapper">
		<div id="page">
			<p>Lorem ipsum dolor sit amet consectetuer sollicitudin id semper eget nibh. Sit egestas sit adipiscing neque est Quisque eget sit id Nullam. Phasellus tellus Nulla vitae suscipit ante semper Aenean lacinia mollis ante. Interdum mattis.</p>
			<p>Sit interdum id lacus augue et Phasellus tincidunt natoque amet tortor. Curabitur netus pede massa Sed elit quam eget dapibus adipiscing lorem. Nunc augue turpis nec libero Nulla Lorem orci convallis Phasellus orci. Laoreet wisi Vestibulum sit nibh non.</p>
			<p>Nibh nec senectus habitasse Vivamus est dui Phasellus ipsum Vestibulum ut. Lacinia laoreet mauris sagittis Morbi facilisi risus volutpat tristique convallis wisi. Adipiscing ipsum ligula ac Nullam ac Morbi Nullam pede pede turpis. Eros metus adipiscing Sed.</p>
			<p>Quam augue ut risus Lorem semper Aenean a laoreet id orci. Habitant natoque elit mattis malesuada Nam wisi malesuada Sed sed dui. Proin libero pulvinar vestibulum rutrum iaculis Curabitur Duis et tortor metus. Consectetuer egestas auctor.</p>
			<p>Nulla velit massa interdum amet Curabitur nunc cursus vitae orci nisl. Ornare dolor lorem parturient ante eget Lorem Proin pellentesque Sed consequat. Vel et Integer iaculis ac et semper facilisis mauris magnis nibh. Suspendisse neque id et Morbi Nulla eu diam.</p>
		</div>
	</div>
	<div id="footer">
		<p>footer</p>
	</div>
</body>
</html>

тоесть фикс для оперы состоит в этом html{overflow:auto;}.

Ребят пожалуйста протестируйте это в опере.

Так как у меня все ок (опера 9.63, 10.10). А например давал этот код psywalker-у, то у него не работает.

Edited December 12, 2009 by psywalker

psywalker · December 12, 2009

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

http://psywalker.ru/Forum/Footer_bottom/test26.html

Попробуйте поднять нижнюю границу, нажмите F5, а потом просто потяните опять именно за нижнюю границу (это принципиально). И футер должен зависнуть наверху сразу после контента (в середине), а не поехать за границей вниз (как хотелось-бы) так у меня происходит почему-то)))

Отпишитесь, у кого как работает в Опере, у меня так: http://psywalker.ru/Forum/Footer_bottom/Opera_001.png

sigma77 · December 12, 2009

Да, у меня он не работает, вот ссылка, прошу независимых экспертов помочь в расследовании.
http://psywalker.ru/Forum/Footer_bottom/test26.html
Отпишитесь, у кого как работает в Опере, у меня так: http://psywalker.ru/Forum/Footer_bottom/Opera_001.png

Opera 10.10 Beta (build 1848) - футер прижат.

psywalker · December 12, 2009

Opera 10.10 Beta (build 1848) - футер прижат.

Погоди, а ты как проверяла?

Попробуй поднять нижнюю границу, нажми F5, а потом просто потяни опять именно за нижнюю границу (это принципиально). И футер должен остаться наверху сразу после контента (в середине), а не поехать за границей вниз (как хотелось-бы) так у меня происходит почему-то)))

sigma77 · December 12, 2009

Погоди, а ты как проверяла?

Просто ресайзом.

Попробуй поднять нижнюю границу, нажми F5, а потом просто потяни опять именно за нижнюю границу (это принципиально). И футер должен остаться наверху сразу после контента (в середине), а не поехать за границей вниз (как хотелось-бы) так у меня происходит почему-то)))

Хм... действительно интересный эффект... ) Причем проявляется только если изменять именно нижнюю границу, если тянуть за угол, или увеличивать по кнопке всё работает :rolleyes:

Edited December 12, 2009 by sigma77

psywalker · December 12, 2009

Просто ресайзом.
Хм... действительно интересный эффект... ) Причем проявляется только если изменять именно нижнюю границу, если тянуть за угол, или увеличивать по кнопке всё работает

Вот я про то же и говорю. sigma77 спасибо тебе.

mishka2

Медведь, прости, но ты точно ошибаешься значит.

Justnewone · December 12, 2009

psywalker · December 12, 2009

Спасибо дружище, у меня такая же фигня.

mishka · December 12, 2009

если убрать html{overflow:auto} то и резайзить страничку ненадо - так как футер не прижимается и без этого. Если оставить html{overflow:auto} - то футер не прижимается только в том случае если окно ресайзить за нижнюю границу.

Ктото знает как это побороть?

psywalker · December 12, 2009

если убрать html{overflow:auto} то и резайзить страничку ненадо - так как футер не прижимается и без этого. Если оставить html{overflow:auto} - то футер не прижимается только в том случае если окно ресайзить за нижнюю границу.
Ктото знает как это побороть?

Хааа, приколист, если бы кто нибудь это знал, ты бы уже первый узнал об этом :rolleyes:

Sign In

Footer at bottom

Question

mishka

Link to comment

Share on other sites

9 answers to this question

Recommended Posts

psywalker

Link to comment

Share on other sites

sigma77

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

sigma77

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Justnewone

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

mishka

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information