Positionierung header/footer

Die Bereiche können mit 3 verschiedenen Eigenschaften platziert werden:

  • inline - Fußbereich kommt direkt nach Inhalt, Kopfbereich kann bei viel Inhalt nach oben wegscollen
  • fixed - ist oben und unten fest positioniert, unabhängig von der Menge des Inhalts
  • fullscreen - erweitert fixed - leicht durchsichtig und bei Klick auf den Inhalt werden Kopf- und Fußbereich ausgeblendet. Ideal bei Inhalt mit Fotos und Videos.

Hier der entsprechende Code:

Inline

<div data-role="header" data-position="inline"></div>
<div data-role="footer" data-position="inline"></div>

Fixed

<div data-role="header" data-position="fixed"></div>
<div data-role="footer" data-position="fixed"></div>

Fullscreen

<div data-role="header" data-position="fixed" data-fullscreen="true"></div>
<div data-role="footer" data-position="fixed" data-fullscreen="true"></div>