Sticky Footers

Sticky footers are footers that are pinned to the bottom of your browser viewport. They are not, however fixed. That is, when the content above grows sufficiently, the footer is pushed down and your page scrolls normally — with your footer going along for the ride. To do this with Harmony, you first need to create the sticky footer, then add your Harmony structure in a designated area. For the purposes of this tutorial, we'll call that area content. We'll also need a handful of simple CSS rules.

1. Create a new document

Create a new html page and save it inside your defined local site.

2. Add the basic markup code

Switch to Code View and markup your page so that it looks like this:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Sticky Footer Test</title>
</head>
<body>
<div class="content">
[blank line]
</div>
<div class="footer">
[blank line]
</div>
</body>
</html>

3. Insert your Harmony structure

Place your cursor inside the blank line inside the content DIV and open the Harmony UI. Create your Harmony structure with as many sections and columns as you want.

4. Customize your footer

Place your cursor inside the blank line inside the footer DIV. If your footer is to simple, then simply type in the text you need. If you'd like a more complex footer, insert a new Harmony inside inside and configure it as you want.

5. Add the CSS

Open the Harmony CSS file — p7HMY-01.css — that is linked to your page and scroll down to the bottom. Make a new line just before the first media query, which begins with this comment:

/*
***********************************************
Media Queries
***********************************************
*/

Paste in the following CSS rules:

html,
body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
.content {
flex: 1 0 auto;
}
.footer {
flex-shrink: 0;
}

Save the CSS file.

That's it. You're done!

Preview example page

© 2018 Project Seven Development
Navigation