Форум Сайтостроение Веб-строительство

Как прижать футер к низу экрана?

12
vandamme
На сайте с 30.11.2008
Offline
675
vandamme
#11

position: absolute

bottom: 0

не пробовали?

VoV@
На сайте с 22.09.2007
Offline
196
VoV@
#12
vandamme:
position: absolute
bottom: 0
не пробовали?

Так футер будет перекрывать контент, у которого position не absolute.

⭐ Разработка Андроид-приложений (Xamarin C#). ⭐ Разработка ASP.NET (WebForms, MVC, WebAPI, Core). ⭐ Цой жив!
vandamme
На сайте с 30.11.2008
Offline
675
vandamme
#13

тогда сделай дочерним, положи в контейнер relative

DiAksID
На сайте с 02.08.2008
Offline
236
DiAksID
#14

делается в два движения: сначала div на 100% и 100% с relative, внутрь div c absolute и bottom:0;


#body {
	position:relative;
	max-width:100%;
	min-height:100%;
}

#footer {
	position:absolute;
	bottom:0;
	width:100%;
}

вырезано из рабочего css работает как надо - либо лепит футтер на низ экрана, либо на низ страницы, если она длиннее экрана. ;) vandamme успел первым... в осле придётся поколдовать с max-width и min-height ессесно, но это ерунда... да, и последнему div перед футтером надо конечно снизу padding влепить в высоту футтера, что бы не наезжал.

show must go on !!!...
Google AdSense улучшил адаптивные В Яндекс.Вебмастере появилась проверка Google: как сделать статические
Olldman
На сайте с 21.04.2010
Offline
79
Olldman
#15

http://realtsib.ru/oldman/footer_bottom/index.html - считайте первый div всем своим контентом.

nikhotin
На сайте с 24.05.2007
Offline
74
nikhotin
#16

Посмотрите на код: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Документ без названия</title>

<style>

html {

	height:100%;

}

body {

	margin:0px;

	height:100%;

	padding: 0px;

}

#page {

	min-height: 100%;

	margin: 0 auto;

	background-color: #090;

}

* html #page {

	height: 100%;

}  /*  хак для IE */

#content {

	padding-bottom: 80px;

	background-color: #900;

}

#content2 {

	margin:0 auto;

	width: 960px;

	background-color: #C90;

}

#footer {

	height: 80px;

	width: 100%;

	margin-top: -80px;

	margin-right: 0px;

	margin-bottom: 0px;

	margin-left: 0px;

	background-color: #00F;

}

</style>

</head>

<body>

<div id="page">

  <div id="content">

    <div id="content2"> Шапка, Контент и т.п.</div>

  </div>

</div>

<div id="footer">

  <div id="content2"> Подвал</div>

</div>

</body>

</html>

Нет на самом деле проблем с повторяющимся фоном

Ничто не пугает нас страшнее всего,как одинокая маленькая девочка в белом платьице холодной осенней ночью на аллее рядом с кладбищем...
12

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий