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

[zhizherinv]

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

Змінено 5 жовтня 2021 користувачем zhizherinv

[buslikdrev]

Чем припугивали полосу, что она вас не боится?

[ibond]

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

 

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

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

 

[zhizherinv]

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});
	}
});

 

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

[andrewborodiy]

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

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

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

[zhizherinv]

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

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

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

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

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

[zhizherinv]

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

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

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

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

не помогло(

[pashast]

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

 

html, body {
    height: 100%;
}

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

#main {
    flex: 1 0 auto;
}

footer {
    flex: 0 0 auto;
}

 

[zhizherinv]

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

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

 

html, body {
    height: 100%;
}

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

#main {
    flex: 1 0 auto;
}

footer {
    flex: 0 0 auto;
}

 

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

[pashast]

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

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

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

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

 

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