A Sticky Situation!
How do you get a footer to stick to the bottom of a page?
A common difficulty in web design is that the page content can change dynamically, based on user interaction. This can play havoc with the footer of the page.
It's nice when it can be placed at the bottom of a webpage in a 'sticky' fashion. Notice, our page does not have any 'Primary Content' yet the footer remains faithfully 'stuck' at the bottom of the page.
Even if we add content (click the green button below) things still work swimmingly!
(Use the 'Stooge' button to remove/add the sticky footer for comparison purposes).
Browser Window Size:
About the app
This app was written during a class called 'Web Computing-1.' The class was an introduction to HTML5, CSS and JavaScript. As you can see from the app's operation, our goal was to demonstrate how each technology served to make a cohesive design.
The 'Stooge Button' is a zany reminder that we should always be aware of presentation and style and not to be a 'stooge' in our designs. It also removes/resplaces the styles that make the footer sticky, showing the contrast between good and poor design.
In addition to demonstrating the implementation of a 'sticky footer' we also introduced the following ideas:
- CSS positioning ('Stooge Button')
- Using transparent background images (again, 'Stooge Button'
- Dynamic browser size reporting and media queries (bottom-border on the nav bar changes color at Bootstrap 5 'break points')
- Specialty design elements such as Google fonts, favicons and shadowing.
- Creating random string content (binary vomit!) and introducing it into the fabric of the web page.
- Without a framework like Bootstrap, where much of the design is done for you, a designer must think of details themselves and implement them with CSS and JavaScript.