header, main, footer

Table of Contents

Overview

主要架構包含：

Navigation Bar 導覽列
Main Content 主要內容
Footer 頁尾

ezgif.com-gif-maker.gif

Solution 1

實作概念：

把三項內容用 flexbox 排列，並將排列方式改為垂直排列，接著設定最小高度為可視範圍的 100%，在 header 和 footer 中再利用 margin auto 讓可視範圍中的空白區域填滿。

這時候如果 main 區塊沒有填滿整個瀏覽器的可視範圍時，就會被 margin 給填滿；而如果 main 區塊已經填滿或超過整個可視範圍時就不會再填充 margin 產生高度。

此範例將 main 垂直置中，因為 header 和 footer 各分一半的 margin，如果要讓 main 依序從上方往下排列，將 header 的 margin 拿掉即可。

<aside> 💡 本範例過程使用 Bootstrap 通用類別實作

</aside>

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="./node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>
    <link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.css">
</head>

<body>
    <div class="d-flex flex-column min-vh-100">
        <header class="mb-auto bg-secondary">
            <p class="fs-3">this is header</p>
        </header>
        <main class="bg-primary">
            <p class="fs-1">lorem100</p>
        </main>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit soluta ratione delectus commodi, quis quia obcaecati tenetur! Voluptate, ab nisi, fugit sit alias veritatis ipsa error sapiente soluta illum nesciunt.</p>
        <footer class="mt-auto bg-warning">
            <p class="fs-3">this is footer</p>
        </footer>
    </div>

</body>

</html>

Solution 2

實作概念：

設定 header 與 footer 的高度，並用 css function calc() 設定 main 的最小高度 min-height 為 100% - header - footer。

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="./node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>
    <link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.css">
    <link rel="stylesheet" href="./index.css">
</head>

<body>
    <header class="bg-secondary">
        <p class="fs-3">this is header</p>
    </header>
    <main class="bg-primary">
        <p class="fs-1">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusamus ullam sint provident, ipsam
            cum, distinctio nesciunt in eveniet enim facilis quidem nobis accusantium, sit voluptate tempore aspernatur
            voluptas iure deleniti. Iste sapiente nisi, pariatur obcaecati debitis tempora ab, velit, earum quaerat
            veniam error odio dolores quos aliquam quo ducimus molestiae.</p>
    </main>
    <footer class="bg-warning">
        <p class="fs-3">this is footer</p>
    </footer>

</body>

</html>