Прибити футер до низу сторінки

Avatar

Від Orville 06-06-2023 20:39:29

Учасник · 14 повідомлень

Вітаю вас!

Хочу зафіксувати підвал на одному місці внизу сторінки, щоб на сторінках, де мало контенту він не піднімався наверх, некрасиво.

Як я зрозумів, є 5 способів це зробити. HTML-код всіх них має таку структуру:

<html>
<body>

<div class="wrapper">

  <div class="content"></div>

  <div class="footer"></div>

</div>

</body>
</html>


А в CSS-коді треба прописати:

* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
.wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.content {
  flex: 1 0 auto;
}
.footer {
  flex: 0 0 auto;
}

Допоможіть, будь ласка, розібратися, в яких саме файлах треба це прописати? footer.php та style.css?

Avatar

Від AzzePis 06-06-2023 20:56:13

Administrator · 999 повідомлень

Доброго дня.
footer.php відповідає зазвичай тільки за нижню частину сторінки, тож ви не зможете через один цей файл організувати потрібну структуру сторінки.
А ось стилі можна в style.css прописати

В найпростішому варіанті у вас у header.php має бути ця частина структури:

<html>
<body>

<div class="wrapper">

В index.php ця:
  <div class="content"></div>

І у footer.php ця:

<div class="footer"></div>

</div>

</body>
</html>


Український хостинг для WordPress | Шаблони та плагіни для WordPress українською
Тут можна купити домен за найкращою ціною

Avatar

Від Orville 06-06-2023 22:39:06

Учасник · 14 повідомлень

Дякую вам за відповідь!

Перепробував стільки способів. Нічого не допомогало. А потім знайшов відео, де хлопець-індус показав за 3 хвилини, як це зробити. Може комусь тут також допоможе.

Просто у файлі functions.php у самому низу пишемо цей код і все запрацювало:

add_action( 'wp_footer', 'astra_footer_align_bottom' );
function astra_footer_align_bottom () {
    ?>
    <script type="text/javascript">
        document.addEventListener(
            "DOMContentLoaded",
            function() {
                fullHeight();
            },
            false
            );
        function fullHeight() {
            var headerHeight = document.querySelector("header").clientHeight;
            var footerHeight = document.querySelector("footer").clientHeight;
            var headerFooter = headerHeight + footerHeight;
            var content = document.querySelector("#content");
            content.style.minHeight = "calc( 100vh - " + headerFooter + "px )";
        }
    </script>
    <?php
}

UPD. Коли вийшов з адмінки футер знов піднявся (((

UPD2. Дивно, але всі ці глюки через плагін WP Fastest Cache. Видалив його і все запрацювало!

В останнє редагував Orville (06-06-2023 23:07:25)

Avatar

Від AzzePis 06-06-2023 23:24:11

Administrator · 999 повідомлень

Плагін рекомендую повернути. Просто після змін в коді необхідно очищати кеш (окрема кнопка у верхній панелі адміністратора)


Український хостинг для WordPress | Шаблони та плагіни для WordPress українською
Тут можна купити домен за найкращою ціною

Avatar

Від Orville 07-06-2023 11:51:20

Учасник · 14 повідомлень

Ще раз дякую вам!