Sticky header and footer

Developer
Jermaine
Size
3,347 Kb
Views
36,432
  1. Sticky header and footer Previews
  2. Sticky header and footer HTML Codes
  3. Sticky header and footer CSS Codes

How do I make an sticky header and footer?

Testing code for a sticky header and footer, no matter how long your page-content (In <main>) is.. What is a sticky header and footer? How do you make a sticky header and footer? This script and codes were developed by Jermaine on 26 August 2022, Friday.

Sticky header and footer Previews
IQ Test

Sticky header and footer - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Sticky header and footer</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <header>	This is your header
</header>
<main> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id risus tortor. Ut scelerisque hendrerit cursus. Cras quis gravida diam. In blandit tempor mi ut gravida. Mauris lobortis convallis lorem quis accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin non semper lacus, id tristique quam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer dignissim posuere urna, sit amet rhoncus nisi placerat eu. Proin sit amet ornare ipsum. Cras semper tempor aliquet. </p> <p> Sed iaculis leo purus, faucibus fermentum arcu tincidunt at. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi fringilla volutpat arcu eget consectetur. Maecenas et mauris at odio pretium varius ac iaculis massa. Suspendisse auctor volutpat gravida. Phasellus mauris nulla, pharetra quis ornare quis, imperdiet nec mauris. Aliquam ornare, odio et condimentum finibus, sapien orci scelerisque nulla, id finibus odio lacus vel ipsum. Donec nec varius mauris. Duis et ornare ipsum, ac pretium justo. Sed et finibus purus. Maecenas id sapien non massa molestie vulputate non non libero. Donec finibus id lacus ac vestibulum. Aenean odio augue, fermentum id mi sed, tincidunt euismod turpis. Etiam tempus ipsum ac velit venenatis posuere. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id risus tortor. Ut scelerisque hendrerit cursus. Cras quis gravida diam. In blandit tempor mi ut gravida. Mauris lobortis convallis lorem quis accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin non semper lacus, id tristique quam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer dignissim posuere urna, sit amet rhoncus nisi placerat eu. Proin sit amet ornare ipsum. Cras semper tempor aliquet. </p> <p> Sed iaculis leo purus, faucibus fermentum arcu tincidunt at. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi fringilla volutpat arcu eget consectetur. Maecenas et mauris at odio pretium varius ac iaculis massa. Suspendisse auctor volutpat gravida. Phasellus mauris nulla, pharetra quis ornare quis, imperdiet nec mauris. Aliquam ornare, odio et condimentum finibus, sapien orci scelerisque nulla, id finibus odio lacus vel ipsum. Donec nec varius mauris. Duis et ornare ipsum, ac pretium justo. Sed et finibus purus. Maecenas id sapien non massa molestie vulputate non non libero. Donec finibus id lacus ac vestibulum. Aenean odio augue, fermentum id mi sed, tincidunt euismod turpis. Etiam tempus ipsum ac velit venenatis posuere. </p>
</main>
<footer>	An experiment by <a href="http://www.dviate.com/" rel="external">Dviate</a> &mdash; Color inspiration via <a href="http://www.colourlovers.com/palette/1015109/All_Eyes_On_You" rel="external">Colourlovers</a>
</footer>
</body>
</html>

Sticky header and footer - Script Codes CSS Codes

/* coloring */
/* animation stuff */
@import "http://fonts.googleapis.com/css?family=Varela+Round";
body,
html { font-family: "Varela Round", sans-serif; font-size: 12px; background-color: #A82743; color: #F1EDDC;
}
html,
body,
main { height: 100%;
}
body { display: table; width: 100%; margin: 0; padding: 0;
}
a,
a:link,
a:active,
a:hover,
a:visited { color: #F1EDDC; text-decoration: none; border-bottom: 1px solid rgba(241, 237, 220, 0); -webkit-transition: all 750ms; -moz-transition: all 750ms; transition: all 750ms;
}
a:hover { border-bottom: 1px solid #f1eddc;
}
main p { width: 300px; margin: 10px auto; line-height: 1.5em; text-align: justify;
}
header,
footer { background-color: #E15E32; height: 50px; line-height: 50px; text-align: center;
}
footer { display: table-row; height: 1px; font-size: 9px; color: #F1EDDC;
}
Sticky header and footer - Script Codes
Sticky header and footer - Script Codes
Home Page Home
Developer Jermaine
Username dviate
Uploaded August 26, 2022
Rating 3
Size 3,347 Kb
Views 36,432
Do you need developer help for Sticky header and footer?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Jermaine (dviate) Script Codes
Name
Blur demo
Dingetje 1
Ripples
Dingetje 2
Test
Filter testje
Mac Baby
A Pen by Jermaine
Telecom preloader in SVG
Testje voor KPN
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!