Перейти до вмісту
Пошук в
  • Детальніше...
Шукати результати, які ...
Шукати результати в ...

Как прижать футер к низу?


Recommended Posts

если мало контента - после футера белая область, подскажите, как его можно прижать ? Всё, что знаю, пробовал - не получилось и тем на эту тему толковых нет

Змінено користувачем zhizherinv
Надіслати
Поділитися на інших сайтах


как-то так можно, через jquery

 

var contentHeight = $('#content').height()

$(document).ready(function() {
	var wHeight = $(window).height();
	
	if (!$('body').hasClass('common-home')) {
		$('#content').css({'min-height': wHeight - 326});
	}
});

 

Надіслати
Поділитися на інших сайтах

32 минуты назад, ibond сказал:

как-то так можно, через jquery

 


var contentHeight = $('#content').height()

$(document).ready(function() {
	var wHeight = $(window).height();
	
	if (!$('body').hasClass('common-home')) {
		$('#content').css({'min-height': wHeight - 326});
	}
});

 

а куда это вставлять?

Надіслати
Поділитися на інших сайтах


Можно и с помощью стилей:

body {
    height: 100%;
    display: flex;
    flex-direction: column;
}

Вставлять в файл стилей, например шаблона catalog/view/theme/ваш_шаблон/stylesheet/stylesheet.css

Надіслати
Поділитися на інших сайтах


Только что, andrewborodiy сказал:

Можно и с помощью стилей:


body {
    height: 100%;
    display: flex;
    flex-direction: column;
}

Вставлять в файл стилей, например шаблона catalog/view/theme/ваш_шаблон/stylesheet/stylesheet.css

спасибо, попробую

Надіслати
Поділитися на інших сайтах


9 часов назад, andrewborodiy сказал:

Можно и с помощью стилей:


body {
    height: 100%;
    display: flex;
    flex-direction: column;
}

Вставлять в файл стилей, например шаблона catalog/view/theme/ваш_шаблон/stylesheet/stylesheet.css

не помогло(

Надіслати
Поділитися на інших сайтах


Надо обернуть все что выше над футером в div, и потом флексом прижать.

image.png.ffd993cf5af891f7a06233c1500f5f02.png

 

html, body {
    height: 100%;
}

#wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
}

#main {
    flex: 1 0 auto;
}

footer {
    flex: 0 0 auto;
}

 

Надіслати
Поділитися на інших сайтах

16 минут назад, pashast сказал:

Надо обернуть все что выше над футером в div, и потом флексом прижать.

image.png.ffd993cf5af891f7a06233c1500f5f02.png

 


html, body {
    height: 100%;
}

#wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
}

#main {
    flex: 1 0 auto;
}

footer {
    flex: 0 0 auto;
}

 

подскажите, в каком файле можно это всё обернуть?

Надіслати
Поділитися на інших сайтах


зависит от вашей темы.

в дефолтной это

catalog/view/theme/default/template/common/header.tpl (добавить <div id="wrapper"> и <div id="main"> после body)

catalog/view/theme/default/template/common/footer.tpl (добавить закрывающий </div> перед футером и после футера)

 

Обязательно посмотрите в консоли браузера, все ли теги закрылись, чтобы не сломалась верстка

  • +1 1
Надіслати
Поділитися на інших сайтах

Створіть аккаунт або увійдіть для коментування

Ви повинні бути користувачем, щоб залишити коментар

Створити обліковий запис

Зареєструйтеся для отримання облікового запису. Це просто!

Зареєструвати аккаунт

Вхід

Уже зареєстровані? Увійдіть тут.

Вхід зараз
  • Зараз на сторінці   0 користувачів

    • Ні користувачів, які переглядиють цю сторінку
×
×
  • Створити...

Important Information

На нашому сайті використовуються файли cookie і відбувається обробка деяких персональних даних користувачів, щоб поліпшити користувальницький інтерфейс. Щоб дізнатися для чого і які персональні дані ми обробляємо перейдіть за посиланням . Якщо Ви натиснете «Я даю згоду», це означає, що Ви розумієте і приймаєте всі умови, зазначені в цьому Повідомленні про конфіденційність.