如何让HTML设计只显示页眉，而不是整个页面

<style>
    header {
        display: block;
    }
    body {
        display: none;
    }
</style>

<template>
    <div>
        <header>
            <!-- 页眉内容 -->
        </header>
        <main v-if="showMain">
            <!-- 页面主体内容 -->
        </main>
        <footer v-if="showFooter">
            <!-- 页脚内容 -->
        </footer>
    </div>
</template>

<script>
export default {
    data() {
        return {
            showMain: false, // 控制是否显示主体内容
            showFooter: false // 控制是否显示页脚
        };
    }
};
</script>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        var header = document.querySelector("header");
        var body = document.querySelector("body");

        header.style.display = "block";
        body.style.display = "none";
    });
</script>