<header>I am the header</header>
<main>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus semper lacus at sapien malesuada, eget imperdiet leo pulvinar. Nullam elementum posuere ex eu sagittis. Mauris pellentesque quam id nulla placerat laoreet. Duis imperdiet gravida pellentesque. Suspendisse molestie interdum turpis sed rutrum. Phasellus eleifend ullamcorper dui ut ornare. Nam a urna ut neque tempor tempus vel non nulla. Nulla mattis justo eget justo consequat, sit amet aliquam dui efficitur. Morbi commodo scelerisque neque, vitae suscipit magna convallis nec. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus aliquam tincidunt ligula eget vestibulum. Etiam luctus quam enim, tempor consequat tortor elementum ut. Etiam nec tellus eget justo fermentum laoreet ut et ante. Mauris ut magna rutrum lectus feugiat dignissim. Maecenas faucibus quis diam ut lobortis. Pellentesque lobortis sapien vitae risus venenatis, a imperdiet enim vehicula.

  Maecenas pharetra iaculis urna vitae faucibus. Vivamus viverra metus odio, eu efficitur velit lacinia nec. Cras posuere eleifend justo. Suspendisse gravida eget libero ut eleifend. Donec quis imperdiet turpis, sed fringilla lorem. Etiam at varius mauris. Aenean felis tellus, feugiat eu tortor nec, ornare bibendum enim. Integer quis auctor augue, quis laoreet est. In eleifend, lacus id blandit malesuada, nisl arcu tempor libero, sit amet varius enim velit in leo. Praesent consectetur, turpis nec rhoncus posuere, nulla sem tempus dui, in fringilla ante enim et leo. Nunc orci ante, malesuada sit amet nisi venenatis, ultrices pellentesque sapien. In vestibulum euismod neque, in suscipit sem feugiat at.

  Duis a dui iaculis enim placerat maximus. Aenean sed orci quis nunc elementum molestie id eu nisi. Sed ipsum justo, tincidunt eget metus quis, luctus tincidunt libero. Pellentesque et pulvinar massa. In elementum id urna id tincidunt. Nam blandit vel dui at suscipit. Aenean egestas nibh id dui luctus, et molestie arcu fermentum. Vivamus libero felis, ornare quis lacus ac, sagittis aliquet arcu. Mauris facilisis vulputate quam, vitae imperdiet tortor accumsan ac.

  Mauris hendrerit iaculis sodales. Suspendisse quis facilisis mauris. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas vehicula lectus eu felis lacinia faucibus. Morbi a mauris at nibh porttitor egestas a a ex. Suspendisse et justo eu lorem dapibus bibendum ut eu arcu. Integer porttitor, elit ac bibendum convallis, diam metus rutrum tortor, in pharetra sem lorem sit amet ante. Morbi tincidunt augue mauris, id tempus felis molestie vel. Vestibulum aliquam libero a felis dictum feugiat. In hendrerit venenatis mauris a mattis. Morbi congue porttitor quam. Donec in sapien rutrum, mollis ex consequat, faucibus lacus.

  Etiam aliquet ligula urna, vel dignissim mi lobortis eu. Maecenas feugiat pellentesque vulputate. Morbi placerat erat quis lectus condimentum rhoncus. Aliquam pulvinar molestie massa, sed venenatis urna gravida vitae. Vivamus mi metus, vestibulum sit amet lacus ut, cursus consequat est. Etiam aliquet luctus condimentum. Nulla vel leo neque. Aenean efficitur, odio at tristique vestibulum, augue lectus ultricies erat, nec lobortis dolor sapien a felis. Mauris finibus, odio vitae mattis scelerisque, diam nisl pulvinar est, sit amet ultricies turpis mauris ac felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam ut suscipit turpis, eget sodales nisi. Proin volutpat non justo non tempus. Cras pretium erat non quam elementum condimentum. Aliquam erat volutpat.</p>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus semper lacus at sapien malesuada, eget imperdiet leo pulvinar. Nullam elementum posuere ex eu sagittis. Mauris pellentesque quam id nulla placerat laoreet. Duis imperdiet gravida pellentesque. Suspendisse molestie interdum turpis sed rutrum. Phasellus eleifend ullamcorper dui ut ornare. Nam a urna ut neque tempor tempus vel non nulla. Nulla mattis justo eget justo consequat, sit amet aliquam dui efficitur. Morbi commodo scelerisque neque, vitae suscipit magna convallis nec. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus aliquam tincidunt ligula eget vestibulum. Etiam luctus quam enim, tempor consequat tortor elementum ut. Etiam nec tellus eget justo fermentum laoreet ut et ante. Mauris ut magna rutrum lectus feugiat dignissim. Maecenas faucibus quis diam ut lobortis. Pellentesque lobortis sapien vitae risus venenatis, a imperdiet enim vehicula.

  Maecenas pharetra iaculis urna vitae faucibus. Vivamus viverra metus odio, eu efficitur velit lacinia nec. Cras posuere eleifend justo. Suspendisse gravida eget libero ut eleifend. Donec quis imperdiet turpis, sed fringilla lorem. Etiam at varius mauris. Aenean felis tellus, feugiat eu tortor nec, ornare bibendum enim. Integer quis auctor augue, quis laoreet est. In eleifend, lacus id blandit malesuada, nisl arcu tempor libero, sit amet varius enim velit in leo. Praesent consectetur, turpis nec rhoncus posuere, nulla sem tempus dui, in fringilla ante enim et leo. Nunc orci ante, malesuada sit amet nisi venenatis, ultrices pellentesque sapien. In vestibulum euismod neque, in suscipit sem feugiat at.

  Duis a dui iaculis enim placerat maximus. Aenean sed orci quis nunc elementum molestie id eu nisi. Sed ipsum justo, tincidunt eget metus quis, luctus tincidunt libero. Pellentesque et pulvinar massa. In elementum id urna id tincidunt. Nam blandit vel dui at suscipit. Aenean egestas nibh id dui luctus, et molestie arcu fermentum. Vivamus libero felis, ornare quis lacus ac, sagittis aliquet arcu. Mauris facilisis vulputate quam, vitae imperdiet tortor accumsan ac.

  Mauris hendrerit iaculis sodales. Suspendisse quis facilisis mauris. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas vehicula lectus eu felis lacinia faucibus. Morbi a mauris at nibh porttitor egestas a a ex. Suspendisse et justo eu lorem dapibus bibendum ut eu arcu. Integer porttitor, elit ac bibendum convallis, diam metus rutrum tortor, in pharetra sem lorem sit amet ante. Morbi tincidunt augue mauris, id tempus felis molestie vel. Vestibulum aliquam libero a felis dictum feugiat. In hendrerit venenatis mauris a mattis. Morbi congue porttitor quam. Donec in sapien rutrum, mollis ex consequat, faucibus lacus.

  Etiam aliquet ligula urna, vel dignissim mi lobortis eu. Maecenas feugiat pellentesque vulputate. Morbi placerat erat quis lectus condimentum rhoncus. Aliquam pulvinar molestie massa, sed venenatis urna gravida vitae. Vivamus mi metus, vestibulum sit amet lacus ut, cursus consequat est. Etiam aliquet luctus condimentum. Nulla vel leo neque. Aenean efficitur, odio at tristique vestibulum, augue lectus ultricies erat, nec lobortis dolor sapien a felis. Mauris finibus, odio vitae mattis scelerisque, diam nisl pulvinar est, sit amet ultricies turpis mauris ac felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam ut suscipit turpis, eget sodales nisi. Proin volutpat non justo non tempus. Cras pretium erat non quam elementum condimentum. Aliquam erat volutpat.</p>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus semper lacus at sapien malesuada, eget imperdiet leo pulvinar. Nullam elementum posuere ex eu sagittis. Mauris pellentesque quam id nulla placerat laoreet. Duis imperdiet gravida pellentesque. Suspendisse molestie interdum turpis sed rutrum. Phasellus eleifend ullamcorper dui ut ornare. Nam a urna ut neque tempor tempus vel non nulla. Nulla mattis justo eget justo consequat, sit amet aliquam dui efficitur. Morbi commodo scelerisque neque, vitae suscipit magna convallis nec. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus aliquam tincidunt ligula eget vestibulum. Etiam luctus quam enim, tempor consequat tortor elementum ut. Etiam nec tellus eget justo fermentum laoreet ut et ante. Mauris ut magna rutrum lectus feugiat dignissim. Maecenas faucibus quis diam ut lobortis. Pellentesque lobortis sapien vitae risus venenatis, a imperdiet enim vehicula.

  Maecenas pharetra iaculis urna vitae faucibus. Vivamus viverra metus odio, eu efficitur velit lacinia nec. Cras posuere eleifend justo. Suspendisse gravida eget libero ut eleifend. Donec quis imperdiet turpis, sed fringilla lorem. Etiam at varius mauris. Aenean felis tellus, feugiat eu tortor nec, ornare bibendum enim. Integer quis auctor augue, quis laoreet est. In eleifend, lacus id blandit malesuada, nisl arcu tempor libero, sit amet varius enim velit in leo. Praesent consectetur, turpis nec rhoncus posuere, nulla sem tempus dui, in fringilla ante enim et leo. Nunc orci ante, malesuada sit amet nisi venenatis, ultrices pellentesque sapien. In vestibulum euismod neque, in suscipit sem feugiat at.

  Duis a dui iaculis enim placerat maximus. Aenean sed orci quis nunc elementum molestie id eu nisi. Sed ipsum justo, tincidunt eget metus quis, luctus tincidunt libero. Pellentesque et pulvinar massa. In elementum id urna id tincidunt. Nam blandit vel dui at suscipit. Aenean egestas nibh id dui luctus, et molestie arcu fermentum. Vivamus libero felis, ornare quis lacus ac, sagittis aliquet arcu. Mauris facilisis vulputate quam, vitae imperdiet tortor accumsan ac.

  Mauris hendrerit iaculis sodales. Suspendisse quis facilisis mauris. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas vehicula lectus eu felis lacinia faucibus. Morbi a mauris at nibh porttitor egestas a a ex. Suspendisse et justo eu lorem dapibus bibendum ut eu arcu. Integer porttitor, elit ac bibendum convallis, diam metus rutrum tortor, in pharetra sem lorem sit amet ante. Morbi tincidunt augue mauris, id tempus felis molestie vel. Vestibulum aliquam libero a felis dictum feugiat. In hendrerit venenatis mauris a mattis. Morbi congue porttitor quam. Donec in sapien rutrum, mollis ex consequat, faucibus lacus.

  Etiam aliquet ligula urna, vel dignissim mi lobortis eu. Maecenas feugiat pellentesque vulputate. Morbi placerat erat quis lectus condimentum rhoncus. Aliquam pulvinar molestie massa, sed venenatis urna gravida vitae. Vivamus mi metus, vestibulum sit amet lacus ut, cursus consequat est. Etiam aliquet luctus condimentum. Nulla vel leo neque. Aenean efficitur, odio at tristique vestibulum, augue lectus ultricies erat, nec lobortis dolor sapien a felis. Mauris finibus, odio vitae mattis scelerisque, diam nisl pulvinar est, sit amet ultricies turpis mauris ac felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam ut suscipit turpis, eget sodales nisi. Proin volutpat non justo non tempus. Cras pretium erat non quam elementum condimentum. Aliquam erat volutpat.</p>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus semper lacus at sapien malesuada, eget imperdiet leo pulvinar. Nullam elementum posuere ex eu sagittis. Mauris pellentesque quam id nulla placerat laoreet. Duis imperdiet gravida pellentesque. Suspendisse molestie interdum turpis sed rutrum. Phasellus eleifend ullamcorper dui ut ornare. Nam a urna ut neque tempor tempus vel non nulla. Nulla mattis justo eget justo consequat, sit amet aliquam dui efficitur. Morbi commodo scelerisque neque, vitae suscipit magna convallis nec. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus aliquam tincidunt ligula eget vestibulum. Etiam luctus quam enim, tempor consequat tortor elementum ut. Etiam nec tellus eget justo fermentum laoreet ut et ante. Mauris ut magna rutrum lectus feugiat dignissim. Maecenas faucibus quis diam ut lobortis. Pellentesque lobortis sapien vitae risus venenatis, a imperdiet enim vehicula.

  Maecenas pharetra iaculis urna vitae faucibus. Vivamus viverra metus odio, eu efficitur velit lacinia nec. Cras posuere eleifend justo. Suspendisse gravida eget libero ut eleifend. Donec quis imperdiet turpis, sed fringilla lorem. Etiam at varius mauris. Aenean felis tellus, feugiat eu tortor nec, ornare bibendum enim. Integer quis auctor augue, quis laoreet est. In eleifend, lacus id blandit malesuada, nisl arcu tempor libero, sit amet varius enim velit in leo. Praesent consectetur, turpis nec rhoncus posuere, nulla sem tempus dui, in fringilla ante enim et leo. Nunc orci ante, malesuada sit amet nisi venenatis, ultrices pellentesque sapien. In vestibulum euismod neque, in suscipit sem feugiat at.

  Duis a dui iaculis enim placerat maximus. Aenean sed orci quis nunc elementum molestie id eu nisi. Sed ipsum justo, tincidunt eget metus quis, luctus tincidunt libero. Pellentesque et pulvinar massa. In elementum id urna id tincidunt. Nam blandit vel dui at suscipit. Aenean egestas nibh id dui luctus, et molestie arcu fermentum. Vivamus libero felis, ornare quis lacus ac, sagittis aliquet arcu. Mauris facilisis vulputate quam, vitae imperdiet tortor accumsan ac.

  Mauris hendrerit iaculis sodales. Suspendisse quis facilisis mauris. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas vehicula lectus eu felis lacinia faucibus. Morbi a mauris at nibh porttitor egestas a a ex. Suspendisse et justo eu lorem dapibus bibendum ut eu arcu. Integer porttitor, elit ac bibendum convallis, diam metus rutrum tortor, in pharetra sem lorem sit amet ante. Morbi tincidunt augue mauris, id tempus felis molestie vel. Vestibulum aliquam libero a felis dictum feugiat. In hendrerit venenatis mauris a mattis. Morbi congue porttitor quam. Donec in sapien rutrum, mollis ex consequat, faucibus lacus.

  Etiam aliquet ligula urna, vel dignissim mi lobortis eu. Maecenas feugiat pellentesque vulputate. Morbi placerat erat quis lectus condimentum rhoncus. Aliquam pulvinar molestie massa, sed venenatis urna gravida vitae. Vivamus mi metus, vestibulum sit amet lacus ut, cursus consequat est. Etiam aliquet luctus condimentum. Nulla vel leo neque. Aenean efficitur, odio at tristique vestibulum, augue lectus ultricies erat, nec lobortis dolor sapien a felis. Mauris finibus, odio vitae mattis scelerisque, diam nisl pulvinar est, sit amet ultricies turpis mauris ac felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam ut suscipit turpis, eget sodales nisi. Proin volutpat non justo non tempus. Cras pretium erat non quam elementum condimentum. Aliquam erat volutpat.</p>

</main>
<footer>I am the footer</footer>

body {
 /* General reset */
 all: unset;

 height: 100vh;
}

main {
 padding: 24px;
}

header {
 background: dodgerblue;
 height: 64px;
 display: flex;
 justify-content: center;
 align-items: center;

 position: sticky;
 top: 0;
}

footer {
 background: hotpink;
 height: 64px;
 display: flex;
 justify-content: center;
 align-items: center;

 position: sticky;
 bottom: 0;
}