Прибить футер к низу страницы

[cloudrc]

Доброго времени суток!

Нужна помощь в "прибитии" подвала сайта к низу окна браузера при отсутствии контента на какой-либо странице.

 

Сайт: justforlove.ru

На широкоформатном мониторе все хорошо, но на телефоне почти на всех страницах футер прибивается к последнему блоку. 

 

 

Код HTML

</div>

<div id="wrap_footer">
<div id="footer">

  <div class="column">
  
		© 2014-2015 Just For Love - Интернет-магазин товаров для взрослых.
  </div>

  <div class="column">
		8 (495) 777-77-77<br/>
		Skype: justforlove
  </div>
  <div class="column">
		Пн-Пт: 10:00 - 20:00<br/>
		Сб-Вс: 11:00 - 18:00
  </div>
  <div class="column">
<!-- Yandex.Metrika counter -->

<!-- /Yandex.Metrika counter -->
  </div>
 <div id="powered">Разработано <noindex>Ojereliev JFL</a></noindex></div>
</div>


</body></html>

CSS

#wrap_footer {
	clear: both;
	overflow: auto;
	min-width: 1255px;
	min-height: 50px;
	color: #eef1f5;
	font-family: 'Open Sans';
	font-size: 13px;
    background: #414141;
    box-shadow: 0px 0px 20px #000;
}
#footer {
	padding: 20px 0;
	width: 1255px;
	margin: 0 auto;
}

#footer .column:nth-child(1) {
	float: left;
	width: 50%;
	min-height: 50px;
}
#footer .column:nth-child(2) {
	float: left;
	width: 15%;
	min-height: 50px;
	font-size: 14px;
}
#footer .column:nth-child(3) {
	float: left;
	width: 15%;
	min-height: 50px;
	font-size: 14px;
}
#footer .column:nth-child(4) {
	float: left;
	width: 20%;
	min-height: 50px;
}
#footer .column ul {
	margin-top: 0px;
	margin-left: 8px;
	padding-left: 12px;
	list-style-type: none;
}
#footer .column ul li {
	margin-bottom: 3px;
}
#footer .column a {
	text-decoration: none;
	color: #fff;
}

Буду благодарен за помощь!

[destreser]

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

#wrap_footer {
...
height: 105px;
position: relative;
margin-top: -105px;
...
}

Перед </body> добавляешь пустой div со стилями:

пустой div {
height: 105px; -> это фиксированная высота футера, такая же или чуть больше, чем у #врап_футер
position: relative;
margin-top: -105px; -> снова эта цифра, ужас какой.
}

Очевидный минус такого решения - футер должен быть с фиксированной высотой. Ну и обязательно что-то еще.

Змінено 20 березня 2015 користувачем destreser

[cloudrc]

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

#wrap_footer {
...
height: 105px;
position: relative;
margin-top: -105px;
...
}

Перед </body> добавляешь пустой div со стилями:

пустой div {
height: 105px; -> это фиксированная высота футера, такая же или чуть больше, чем у #врап_футер
position: relative;
margin-top: -105px; -> снова эта цифра, ужас какой.
}

Очевидный минус такого решения - футер должен быть с фиксированной высотой. Ну и обязательно что-то еще.

 

К сожалению, футер не сдвинулся с места(

[destreser]

 

Перед </body>

 

А у вас

[cloudrc]

А у вас

Скриншот 2015-03-21 12.22.44.png

Поправил, не работает)

[destreser]

Теперь я виноват :)
Еще #container {height:100%;}

[cloudrc]

Теперь я виноват :)

Еще #container {height:100%;}

Попробовал, не работает)

Но появилась полоса прокрутки у футера(на мониторе, на телефоне все тоже самое)

А в Яндекс браузере так вообще футер оказался по центру страницы сайта

[destreser]

Вот базовый метод - http://xiper.net/collect/html-and-css-tricks/karkas-verstki/podval-k-nizu
Изучите, адаптируйте под себя.