<div class="site-content">
<header class="site-header">
<span class="photo-credit">Photo by <a href="https://unsplash.com/@seankowal?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Sean Kowal</a> on <a href="https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
</span>
</header>
<main class="site-main">
<p>This is a simple example of creating a site with a footer positoned at the bottom of the screen when there is a short amount of content.</p>
</main>
</div>
<footer class="site-footer">
Copyright information.
</footer>
/* Fixed Footer Styles */
html,
body {
height: 100%;
}
body {
margin: 0;
display: flex;
flex-direction: column;
}
.site-content {
flex-grow: 2;
}
/* Visual Styles */
body {
font-family: system-ui, sans-serif;
background-color: #f4f4f4;
color: #444;
}
a {
color: inherit;
}
a:hover {
text-decoration: none;
}
.site-footer {
padding: 1rem;
background-color: #333;
color: white;
}
.site-header {
background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/187/sean-kowal-1486376-unsplash.jpg") no-repeat center / cover;
min-height: 40vh;
display: flex;
align-items: flex-end;
justify-content: flex-end;
}
.photo-credit {
font-size: 0.75em;
padding: 1em;
color: hsl(0, 0%, 80%);
background-color: hsla(0, 0%, 20%, 0.5);
}
.site-main {
width: 90%;
max-width: 50rem;
margin: 0 auto;
padding: 2rem 0;
line-height: 1.5;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.