4.03.14, 21:36
0 комментарий
  Разное

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

Часто встречаются мне подобные вопросы. Но так же в интернете не мало примеров реализации данной задачи.
Что ж, я тоже добавлю один вариант :)
Но моя реализация подходит только для футеров с фиксированной высотой. Хотя насколько мне известно, почти все футеры делаются с фиксированной высотой.



<!DOCTYPE html>
<html>
<head>
<style>
*{padding:0;margin:0;}
body{background:#f0f0f0;}
.wrapper, .footer-content{width:1000px;}
.wrapper{
  margin:0 auto 70px;

  background:#fff;
  height:1000px;
}
.footer{
  position:fixed;
  top:100%;
  left:0;
  width:100%;
  height:50px;
  margin-top:-50px;

  background:#444;
}
.footer-content{
  margin:0 auto;
  text-align:center;
  color:#fff;
  line-height:50px;
}
</style>
</head>
<body>
<div class="wrapper">
	тут ваш контент
</div>

<div class="footer">
	<div class="footer-content">
		тут футер
	</div>
</div>
</body>
</html>



Оформление сделал для наглядности видимости блоков.

Автор: Sander

Напишите своё мнение