Footer Positioning

Description

The three styles of positioning for the header also apply to the footer. They include:

Default

Default: A default footer is positioned after the content section.

<div data-role="footer">
   <!-- Default footer -->
</div>

Fixed

Fixed: A fixed footer, will always remain positioned and visible at the bottom edge of the screen. We can create a fixed footer with the addition of the data-position="fixed" attribute.

<div   data-role="footer" data-position="fixed">
   <h3>Fixed   Footer</h3>
</div>

Responsive

Responsive: When we create a fullscreen page the contents will appear edge-to-edge and the header and footer will responsively appear and disappear based on a touch response.

To create a fullscreen page add data-fullscreen="true" to the page container and include the data-position="fixed" attribute on the header and footer elements.