Sticky Footer

When content is short, the footer sticks to the bottom; when content grows, the footer moves down naturally.

┌────────────────────────────┐
│ Header                     │
├────────────────────────────┤
│ Content (flex: 1)          │
├────────────────────────────┤
│ Footer                     │
└────────────────────────────┘

Key Rules

• Parent: flexDirection: FlexDirection.Column, auto height, and a viewport-sized minHeight
• Content: flexGrow: 1
• Header and footer: flexShrink: 0

Code

Here the empty content area grows to 180 pixels and the footer starts at y: 250. If the content needs 500 pixels of height, the page grows to 620 pixels and the footer moves to y: 570. Supply children or a measure function for real content.

Related Guides

• Flex Grow
• Size