Mobile Layout Reference
This demonstrates a complete mobile app layout combining the fixed header and navigation footer patterns with proper theme-color support for mobile browsers.
Key Features
Theme Color Support
Status bar and notch area match the brand gradient color (#667eea)
Safe Area Insets
Automatic support for iPhone notch and home indicator spacing
Fixed Header
Brand logo, centered title, and user profile access
Bottom Navigation
App-style navigation with home, center actions, and settings
Layout Specifications
- Header Height: 60px + safe area inset top
- Footer Height: 60px + safe area inset bottom
- Theme Color: #667eea (matches brand gradient)
- Background: Brand gradient (135deg, #667eea 0%, #764ba2 100%)
- Content Padding: Automatically adjusted for fixed elements
- Mobile Optimized: Smaller touch targets and responsive spacing
Content Area
This content area automatically adjusts its padding to account for both the fixed header and navigation footer. The layout is optimized for mobile devices with appropriate touch targets and spacing.
The theme-color meta tag ensures that the mobile browser's status bar area (including the notch on newer iPhones) matches the header color for a seamless experience.
Scroll Test
Scroll to test that both header and footer remain fixed while content moves smoothly between them.
Tall Section
This section demonstrates proper scrolling behavior with fixed top and bottom elements.
Final Section
The bottom navigation should always be visible and accessible, even when scrolled to the bottom of the content.