July 2017
Intermediate to advanced
300 pages
5h 43m
English
The layout looks fine without any content, but what happens to the layout if it receives content that is too long?

In fact, we will have a header and footer shifting out of the view when scrolling. It doesn't look user-friendly. Fortunately, we can change it easily using another fresh addition to CSS called Sticky positioning (https://www.w3.org/TR/css-position-3/#sticky-pos).
All we need to do is to modify slightly the title bar component:
./assets/css/Component/titlebar.css
.titlebar { ... position: sticky; top: 0; }
and the footer:
./assets/css/Component/footer.css
.footer { ... position: sticky; ...Read now
Unlock full access