- Автор темы
- #1
Добрый день!
Есть два сайта. На одном Joomla точена, в которой я сделал (ну, как я - я, как говорится, мал и глуп, просто нашёл готовый код, я его лишь могу понять и знаю, куда его вставить) т.н. "липкий" футер. Это не тот, который постоянно внизу окна браузера, куда ни мотай, а который внизу экрана только когда на странице недостаточно контента, чтоб его туда прижать, а в остальное время он себя ведёт так, как должен вести себя типичный футер.
А на сайте втором у меня Prestashop, куда я пытаюсь по аналогии прикрутить такой же, но не могу разобраться в HTML. Перебрал кучу вариантов, ни на один реакции нет.
Вот структура и CSS первого сайта:
А вот структура второго сайта. На первый взгляд всё даже проще, чем в первом варианте, т.к. меньше элементов:
Однако же ничего не хочет работать. Лично у меня две основные непонятки:
1) Как применять стиль к элементу <main> (и надо ли)?
2) <body>, который стоит выше в иерархии, охватывает примерно половину страницы (для меня это 2031.2х784.8), а <main> - всю. Какой из них использовать в качестве обёртывающего страницу элемента?
Заранее низкий поклон всем неравнодушным.
Есть два сайта. На одном Joomla точена, в которой я сделал (ну, как я - я, как говорится, мал и глуп, просто нашёл готовый код, я его лишь могу понять и знаю, куда его вставить) т.н. "липкий" футер. Это не тот, который постоянно внизу окна браузера, куда ни мотай, а который внизу экрана только когда на странице недостаточно контента, чтоб его туда прижать, а в остальное время он себя ведёт так, как должен вести себя типичный футер.
А на сайте втором у меня Prestashop, куда я пытаюсь по аналогии прикрутить такой же, но не могу разобраться в HTML. Перебрал кучу вариантов, ни на один реакции нет.
Вот структура и CSS первого сайта:
HTML:
<body class="site com-sppagebuilder view-page no-layout no-task itemid-101 ru-ru ltr layout-fluid off-canvas-menu-init">
<div class="body-wrapper">
<div class="body-innerwrapper">
<section id="sp-top-bar">...</section>
<header id="sp-header">...</header>
<section id="sp-page-title">...</section>
<section id="sp-main-body">...</section>
<footer id="sp-footer">...</footer>
</div>
<...>
</div>
<...>
</body>#sp-top-bar,
#sp-header,
#sp-page-title,
#sp-footer {
flex-shrink: 0;
}
.body-innerwrapper {
display: flex;
flex-direction: column;
height: 100vh;
}
#sp-main-body {
flex: 1 0 auto;
}
#sp-header,
#sp-page-title,
#sp-footer {
flex-shrink: 0;
}
.body-innerwrapper {
display: flex;
flex-direction: column;
height: 100vh;
}
#sp-main-body {
flex: 1 0 auto;
}
А вот структура второго сайта. На первый взгляд всё даже проще, чем в первом варианте, т.к. меньше элементов:
HTML:
<body id="index" class="lang-ru country-ru currency-rub layout-full-width page-index tax-display-disabled body-desktop-header-style-w-1">
<main>
<header id="header" class="desktop-header-style-w-1">...</header>
<section id="wrapper">...</section>
<footer id="footer">...</footer>
</main>
<...>
<button id="back-to-top" class="">...</button> <!-- На всякий случай пишу элементы с запасом, вдруг это важно -->
</body>Однако же ничего не хочет работать. Лично у меня две основные непонятки:
1) Как применять стиль к элементу <main> (и надо ли)?
2) <body>, который стоит выше в иерархии, охватывает примерно половину страницы (для меня это 2031.2х784.8), а <main> - всю. Какой из них использовать в качестве обёртывающего страницу элемента?
Заранее низкий поклон всем неравнодушным.
