有時候網頁內容高度不夠，會造成 footer 定位在網頁中間很不好看，如果你使用的是 Astra 或 OceanW P 佈景主題，可以參考以下方式可將 footer 自動定位在網頁底部。
如何讓 Astra Footer 保持在網頁底部
Astra 沒有方便的地方設定，必須要在 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
}儲存即可看看效果。
如果你有使用 Astra Pro 專業版主題，可以新增 Custom Layout。
step 1
進入 Astra Options -> Custom Layouts
step 2
點擊【Add New】
step 3
點擊【Enable Code Editor】
step 4
- 輸入 layout 名稱
- 貼上程式碼
<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$gt;step 5
- Layout 選擇 Hooks
- Action 選擇 wp_footer
- Display On Entire Website
儲存即可看看效果。
如何讓 OceanWP Footer 保持在網頁底部
進入選單 – Appearance -> Customize -> Footer Widgets
將選項【Fixed Footer】改成 ON，footer 就會自動移到網頁底部。
使用 flex 技巧，純 CSS Sticky Footer
#HTML
<body class="Site">
<header>…</header>
<main class="Site-content">…</main>
<footer>…</footer>
</body>很簡單的將網頁分成 3 個區塊。
#CSS
.Site {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.Site-content {
flex: 1;
}利用 flex 從上到下排列，設定最小高度為畫面高度，加上自動增長空間，讓主要網頁內容自動延展，Footer 就自動被壓在網頁底部。
參考來源：Sticky Footer
