Как прижать футер к низу страницы

25 июля 2014 Антон Кулешов 1588 0

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

Реклама

Для начала необходимо обозначить HTML-разметку страницы: создать три элемента div с id=main, id=wr-content и id=footer.

<div id="main">
	<div id="wr-content">
		<!-- Тут какой-то контент -->
	</div>
</div>
<div id="footer"></div>

Все div-ы находятся, естественно, внутри элемента body, задаём необходимые стили, чтобы футор стал на свое место.

Все блочные элементы занимают всё доступное место по ширине, но для реализации прижатого футора необходимо, что бы они заняли его и по высоте. Для этого применяем к элементам html и body свойство height со значением 100%.

html, body{
	height: 100%;
}

Далее убираем «ненужный» margin у body в 8px и немного стилизуем страницу.

body{
	margin: 0;
	background-color: #c0deed;
	color: #fff;
}
	#main{
		width: 760px;
		background-color: gray;
		margin: 0 auto;
	}
	#footer{
		height: 150px;
		width: 760px;
		margin: 0px auto;
		background-color: silver;
	}

После того как html и body стали растянуты по вертикали, нам необходимо добавить ещё несколько основных свойств к элементу div с id=main:

min-height: 100%;
margin-bottom: -150px;

Значение нижнего отступа должно равняться высоте футера. Чтобы контент, расположенный в элементе c id=wr-content, не заезжал на футор задаём ему padding-bottom с тем же значением, что и у нижнего отступа.

Вот и всё страничка готова и footer прижат к низу.

Реклама
Комментариев еще не оставлено
no_avatar
Читайте далее

Запрет обтекания тремя способами на CSS

24 июля 2014 Антон Кулешов

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

Анимация занавеса, hover effects

13 февраля 2015 Антон Кулешов

Сегодня поговорим об «украшательствах» и рассмотрим довольно интересную анимацию при наведении на картинку (картинку беру как пример, в реальности эффект можно использовать на чем угодно), а также познакомимся с библиотекой MooTools.

WooCommerce title

28 мая 2016 Антон Кулешов

Совсем недавно я добавил статью, в которой рассмотрел написанный мною WordPress плагин для добавления и изменяя важных для страницы тегов: title, description и keywords. На момент написания этого поста плагин набрал уже более 100 установок, хотя я его нигде не рекламировал. Я решил продолжить эту тему, так как у меня было пару свободных вечеров и возможность поработать с интернет магазином на WooCommerce, то для него я решил сделать такой же вариант.