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

25 июля 2014 Антон Кулешов 1572 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
Читайте далее

Растянутый на всю ширину HTML список

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

Использовать HTML список можно по разному, но, несомненно, чаще всего его применяют при создании меню для сайта. Дизайнерская мысль в этом направлении бьет ключом, а верстальщику приходится приспосабливаться, орудуя не столь многочисленным набором инструментов. С проблемой красивого вписания меню в уже заданные габариты, я и столкнулся совсем недавно.

Оригинальный lightbox на jQuery

15 марта 2016 Антон Кулешов

Приветствую друзья, я уже давно нечего не добавлял по теме «увеличение картинок» или, как принято называть эффект - lightbox. Решений сейчас в интернете можно найти просто массу, и каждое по-своему применимо, так как они были написаны для конкретных задач. Сегодня я же хочу выделить один jQuery плагин из общей массы, названный simplezoom. Перевод названия, которого – простое увеличение, что соответствует самому скрипту.

Улучшенная подсветка кода от prism

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

Доброго времени суток, читатели falbar и гости, зашедшие на эту страницу. В сегодняшней статье я хочу рассказать о том, как подключить к себе на сайт подсветку кода, а именно, плагин под названием prism. Мы разберём не только саму библиотеку, но и, чуть-чуть, затронем back-end.