How to stretch div height to fill parent div - CSS

html

responsive-design

css

flexbox

byAlex Kataev·Feb 21, 2025

You can stretch a <div> to match its parent's height using CSS:

.child-div {
  height: 100%; /* Like always, child follows parent rules */
}

The parent <div> should have a set height:

<div style="height: 200px; /* Parent rules the world */">
  <div class="child-div" style="height: 100%;">
    Content here
  </div>
</div>

This way, the child fills the parent, considering the parent's height is defined. Use flexbox or grid for dynamic parent heights.

Flexbox for responsive layout

Flexbox allows the child <div> to stretch responsively. This is the key to kickass adaptive layouts:

.parent-div {
  display: flex; /* Enables flex superpower */
  flex-direction: column; /* Line up, kiddos! Vertically, please. */
}

.child-div {
  flex-grow: 1; /* Like a plant, it grows to fill available space */
}

Smoothing out the padding and borders

To take into account padding or borders when stretching your divs, include box-sizing: border-box;:

.child-div {
  box-sizing: border-box; /* Makes padding and borders part of the party */
}

This makes the padding and borders join the div's height party.

Avoiding overflow party-crashers

Keep overflow issues from crashing your party:

.child-div {
  overflow: auto; /* If stuff spills over, add a scrollbar */
}

Or, hide any overflow:

.child-div {
  overflow: hidden; /* Hide the evidence of any spills */
}

Total screen domination with full-height layouts

Achieving a full-height layout is like claiming your entire screen real estate — height set at 100% for both html and body:

html, body {
  height: 100%; /* This land is mine. All of it. */
  margin: 0; /* Kick out existing squatters (default margin) */
}

Combine this with absolute positioning for complete domination:

.parent-div {
  position: relative; /* Context for absolute positioning */
}

.child-div {
  position: absolute; /* Sets up camp within the parent */
  top: 0; /* Align to top of parent */
  bottom: 0; /* Align to bottom, stretching to fill */
}

For the rebels: dynamic content

For dynamic stretchy content management, use min-height instead of height:

.child-div {
  min-height: 100%; /* It's minimum, but can grow! Because, change is good. */
}

Adapt with responsive sizing

Stay responsive with flexbox. Adapts to screen sizes and device orientations like a charm:

.parent-div {
  display: flex; /* Flex on system with flex */
  flex-direction: column; /* Skyscrapers, not sprawl */
}

.child-div {
  flex: 1; /* Spread out like butter on a hot pan */
}

Tampering with div dimensions: grid system

The CSS Grid layout lets you tweak and twist div dimensions:

.parent-div {
  display: grid; /* The grid controls things now */
  grid-template-rows: 1fr; /* One row to rule them all */
}

.child-div {
  /* Here, child divers will fill the row */
}