Перейти к содержанию
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;
}

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

post-686629-0-90803000-1426884796_thumb.png

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
html, body {
...
height: 100%;
...
}

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

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

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

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

Изменено пользователем destreser

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
html, body {
...
height: 100%;
...
}

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

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

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

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

 

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

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

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

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

post-686629-0-17947200-1427059135_thumb.jpg

post-686629-0-53653900-1427059135_thumb.jpg

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.