如何让 GRID 的页眉和页脚不是很大并且保持在原位？

Question

我正在尝试制作一个 GRID 布局，其中我有一个页眉在滚动时保持在顶部“粘性”（如果页面非常大）并且不是很高，我也希望页脚有同样的东西, 粘性且始终可见并且只有一点点高，不是很大，如果“主要”不够大，则留在页面底部...

我知道如何用 FlexBox 做到这一点，但我无法用 GRID 实现它，有人知道怎么做吗？

我试图仅通过 HTML 和 CSS

来实现这一点

*{
  margin: 0;
  padding: 0;
}
body{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: 
    "nav" 
    "main" 
    "foot" ;
    grid-template-rows: auto, 1fr, auto;
    height: 100vh;
}
.pageTop{
    background-color: black;
    color: white;
    grid-area: nav;
    position: sticky;
}
.mainIndex{
    background-color: white;
    color: blue;
    grid-area: main;
}
.pageBottom{
    background-color: black;
    color: white;
    grid-area: foot;
}

<body> 
<header class="pageTop">
    <h1><a href=index.html>The SOCIA Circle</a></h1>
    <nav >
        <ul class="ulNav">
            <li><a href="index.html" class="navButtons">HOME</a></li>
        </ul>
    </nav>
</header> 
<main class="mainIndex">
    <h2>HOME</h2>
    <img src="./imagenes/thesociacirclelogo.jpeg" alt="Photo showing a logo of The Socia Circle" width='300' class="photoIndex">
    <p class="pIndex">Loret nisi, inventore ducimus distinctio nemo esse blanditiis animi hic officiis dicta exercitationem, 
        maxime tempora ipsam placeat, dolor ex eum? Provident dolorum ullam, nihil praesentium ad accusamus distinctio!
        Deserunt blanditiis modi ipsa enim quibusdam quia facilis cum aut error, ullam sapiente vero qui? Aut tempore, 
        adipisci quibusdam, quis debitis consequatur labore vitae rerum quae placeat deleniti inventore asperiores!
        Quia autem obcaecati animi ex quod quo, facere quisquam. Inventore facilis error ducimus aut ut qui nihil! A 
        sunt iste, libero perspiciatis magnam nesciunt necessitatibus corrupti repellat error, fuga aperiam!
        Voluptas dolor at quod, et eveniet nihil odio adipisci repellendus! Cum incidunt consequuntur minus id beatae? 
        Cupiditate vel architecto aspernatur quas? Velit sapiente unde aut fugiat quas amet omnis veniam.
        Autem qui iste soluta necessitatibus labore delectus eaque veritatis sequi? Minus reiciendis adipisci sit 
        soluta modi eos illum, architecto ab repellendus assumenda eum dolor quam quasi pariatur magnam labore atque.
        Dignissimos maiores aliquam aspernatur. Id laudantium quam numquam accusantium illo. Ad illum exercitationem 
        fugiat nulla, eos cumque optio reiciendis ex sequi sed aliquid quaerat dolore pariatur dolores dicta maiores dolorum.</p>
</main>
<footer class="pageBottom">        
    <ul class="pFooter"> 
        <li><a href="index.html" class="pFooterLi"> The SOCIA Circle</a></li>
   </ul>
    <section class="sectionFooter"> 
        <ul class="ulFooter">
            <li><a href="https://www.instagram.com/sociacircle_ba" target="_blank" class="liFooter" >Instagram</a></li>
       </ul>
    </section>  
</footer>

Answer 1

这个怎么样？

.pageTop{
    position: fixed;
    width: 100%
}
.mainIndex{
    margin-top: 80px;
}

如何让 GRID 的页眉和页脚不是很大并且保持在原位？

How to have a Sticky Header and Footer with GRID that is not huge and stays in place?

html

css

grid