[опрос] Футер, прибиый к низу страницы

indexmsk · September 4, 2012

Друзья, все мы сталкивались с необходимостью "прибить" футер к низу страницы. Также мы знаем, что есть два различных подхода к этой задаче:

1. Прибить футер с помощью position:absolute. Здесь все просто:

HTML

<body>
	<div class="wrapper">
		<div class="content">
			Lorem ipsum dolor sit amet
		</div>
		<div class="footer">
			Consectetur adipisicing elit, sed do eiusmod tempor
		</div>
	</div>
</body>

CSS (вариант 1)


html, body {
	width:100%;
	height:100%;
}

.wrapper {
	position:relative;
	min-height:100%;
}

.content {
	padding-bottom:200px;
}

.footer {
	position:absolute;
	bottom:0;
	width:100%;
	height:200px;
}

CSS (вариант 2)

...
.footer {
	position:absolute;
	top:100%;
	margin-top:-200px;
	width:100%;
	height:200px;
}

2. Прибить футер с помощью отрицательного значения margin-top.

HTML

<body>
	<div class="content">
		Lorem ipsum dolor sit amet
	</div>
	<div class="footer">
		Consectetur adipisicing elit, sed do eiusmod tempor
	</div>
</body>

CSS

html, body {
	width:100%;
	height:100%;
}

.content {
	position:relative;
	min-height:100%;
	padding-bottom:200px;

}

.footer {
	position:relative;
	margin-top:-200px;
	height:200px;
}

Давайте обсудим, какой вариант идеологически правильный?

С каким меньше хаков надо дописывать, какой вариант больше возможностей дает?

Какой вариант чаще всего используете вы?

USF · September 4, 2012

использую отрицательный margin + в области контента пустой блок "буфер".

абсолютное позиционирование недолюбливаю.

Sign In

[опрос] Футер, прибиый к низу страницы

Question

indexmsk

Link to comment

Share on other sites

1 answer to this question

Recommended Posts

USF

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information