Constant Footer Size & Positioning

[mahendra785]

Ensure that the footer has a constant size across all pages and is always positioned at the bottom of the page, even when the content is shorter than the screen height.

[mahendra785]

Constant Footer Size & Positioning

Pseudocode

1. Footer Component Structure

• Footer Component
  • div.footer
    • Footer content (e.g., copyright, links, social media icons)
    • Ensure the height is fixed.

2. Layout Container

• Main Layout Container
  • div.wrapper
    • header - Navbar or header component
    • main.content
      • Dynamic page content
    • footer - Footer component (constant height)

3. CSS for Constant Footer Size & Positioning

• Set wrapper to fill the screen:
  • Use display: flex; flex-direction: column; on wrapper.
  • Ensure main.content grows to fill the remaining space.
  • Footer should always sit at the bottom.

4. Handle Pages with Short Content

• Ensure main.content stretches to push the footer down:
  • Use flex-grow: 1; on main.content.
  • Footer should not move even if content is short.