How do I force a DIV block to extend to the bottom of a page even if it has no content?

Deeper dive: Techniques and tips

Let's dive deeper and examine different ways to make a div occupy the full height of the page, considering different edge cases.

Leveling the playing field

Firstly, ensure that the html and body tags are set to 100% height and have no margin or padding. Without this, unwanted space could be created around your DIV.

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}


Flexibility at its finest

Flexbox is your friend that helps arrange elements neatly on page. To employ it, assign the display: flex; property to your containing element, often the body.

body {
  display: flex;
  flex-direction: column; /* Stack items vertically */
}


In your content DIV, apply flex-grow: 1; to fill up any leftover space in the container.

.content {
  flex-grow: 1; /* "I want to grow up!", says your DIV */
}


Crossing the gridlines

Similar to Flexbox, CSS Grid can be invoked. Transform the body or any parent container into a grid with three rows. Set the middle row, where your content belongs, to 1fr to grab remaining space.

body {
  display: grid;
  grid-template-rows: auto 1fr auto; /* Distributing size to header, content and footer */
}


Prohibit content caving in

Remember, we don't want our content giving up when the viewport becomes cramped!

body > * {
  min-height: 0;
  min-width: 0; /* "I won't cave in!", asserts every child element */
}


Expose your success

Use background-color or borders to detect whether your DIV is indeed stretching fully. Once confirmed, you can remove this.

div {
  min-height: 100vh;
  background-color: lime; /* Our DIV is going for the "Highlighter" look */
}


Prepare for cross-browser discrepancies

While exceptionally effective, Flexbox and Grid Layout aren't universally supported across different browser versions. Always verify compatibility on Can I use... Support tables for HTML5, CSS3, etc.

Moreover, Brunildo's test page and QuirksMode can help you navigate quirky browser behavior.

Practical considerations

When redefining your layout, remember the value of accessibility. Sometimes, a visually evident footer may be expected at the end of the content. So, it's essential not to lose sight of usability while you make a DIV stretch.