How to align footer (div) to the bottom of the page?

html

responsive-design

css

web-development

byAnton Shumikhin·Jan 3, 2025

Nail the footer down to the bottom with CSS Flexbox. Configure your outermost container (e.g., body) with display: flex; flex-direction: column; min-height: 100vh; ensuring full viewport height. Apply margin-top: auto; on the footer, pushing it to the footer of the page.

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* Our body is now as tall as the viewport! */
}

footer {
  margin-top: auto; /* Presto! Our footer is sat neatly at the bottom */
}

Set up your main content within main tags, and post the footer just below:

<body>
  <main> ... </main> <!-- Here goes the main content -->
  <footer> ... </footer> <!-- And here sits our dutiful footer -->
</body>

Allocate height: 100%; for html and body to grasp the full height of the page.

html, body {
  height: 100%; /* Makes sure our page takes up full height */
}

This responsive solution will stick the footer right where you want it, across devices.

Comprehensive understanding: For varying content lengths

Dealing with scrolling content

The method above works flawlessly for content that doesn't exactly fill the viewport, as the footer sits tight at the bottom. But, if you have longer content, the footer floats down, right behind the content, staying put upon scrolling. No freak accidents or unhinged footers running amok here!

Ensuring cross-browser consistency

For web pages, consistency is key, and browsers can be as different as apples and oranges. Imagine handing out slim fit suit to an orangutan! It's sensible to use a CSS reset like normalize.css to keep all browsers on the same styling page.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">

Fixed footers for those who hate scrolling

For a footer that stays caught in the viewport during scrolling, manspread position: fixed; with bottom: 0; and width: 100%;. Now the footer stays within reach across the full width of the viewport.

footer {
  position: fixed;
  bottom: 0; /* Keeping it grounded */
  width: 100%; /* Our footer takes up full width, like the star of the red carpet */
}

To keep the content from getting camera shy behind the footer, feed padding-bottom on the body just enough to match the footer's height.

body {
  padding-bottom: 60px; /* Adjust it like you'd adjust your tie */
}

For footers that can't make up their mind

When the footer is chockfull of context-driven content, give it dimension with height: auto; to prevent it from overflowing or snipping off content.

Embracing Grid Layouts

Shift to Grid layouts for complex footer placement tasks. It amps up the user experience and is as fashionable as tying a bandana around your neck.

Sticky Footers with sticky property

Make your footer sticky with honey... er, I mean position: sticky; and bottom: 0;. It will stick to the bottom of its parent block, until it meets the edge of the screen, and then it will start scrolling with the content.

Preventing overlap and enforcing margins

#WatchYourMargins and manage them right with margin-top and height to avoid the footer playing tag with the content. Choose negative margins with care, you don't want footers playing hide and seek!

explain-codes / Html / How to align footer (div) to the bottom of the page?

Linked

How can I add a vertical scrollbar to my div automatically?



How to push a footer to the bottom of page when content is short or missing?



100% Min Height CSS Layout



Twitter Bootstrap 3 Sticky Footer



Make footer stick to bottom of page correctly

