CODEWITHSUNDEEP
htmlcssgrid
Lautaro Gatti
Lautaro Gatti

Reputation: 5

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

Im trying to make a GRID layout where i have a Header that stays on top "sticky" while scrolling(if the page is very big) and that is not very tall, also i want this same thing with the footer, to be sticky and always visible and only a little bit tall, not huge and if the "main" is not big enough, stays in the bottom of the page...

i know how to do this with FlexBox, but im unable to achieve it with GRID, someone know how to do it?

Im trying to achieve this only with HTML and 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>

Upvotes: 0

Views: 73

Answers (1)

NikOs
NikOs

Reputation: 52

How about this?

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

Upvotes: 1

Related Questions