If you prefer a cross-browser and responsive CSS solution to fill available height of page, here are some tips.
Note: use this solution for specific pages, otherwise, scrolling will malfunction if content’s height is greater than viewport’s height. Because the solution sets page height to 100% which stop page from scrolling.
There are three different solutions; full-screen, non-fixed toolbars and fixed toolbars. Each solution utilizes different CSS property(s).
In Part 1 we used the Animate.css library of CSS animations as transitions for jQuery Mobile (jQM) pages, popups, and dialogs. In Part 2, we will write our own KeyFrame animation CSS in order to have a unique/one-of-a-kind transition.
You will remember from last time, that to use a CSS transition with jQM, we create a class name for the transition and point that class at a named CSS animation. We can use different animations for the page entering, leaving, and the 2 reverse directions. An animation in CSS is created by defining a set of transforms at various points during the transition duration called keyFrames. Each KeyFrame’s time is defined as a percentage of the animation duration, so the simplest animations can be defined with only 2 KeyFrames: 0% – start transform, and 100% – end transform. The browser is responsible for figuring out how to animate the transform values between the KeyFrames. Continue reading