How Can I Make a Div Child Fill the Remaining Space of Its Parent Container?

Expanding div Height to Occupy Remaining Parent Space

It is a common task to make a div child occupy the remaining space of its parent container without explicitly setting its height. Here are several methods to achieve this:

1. Grid Layout

.container {
  display: grid;
  grid-template-rows: 100px;
}

This method creates a grid layout with one row of 100px height. The child div will fill the remaining space.

2. Flexbox

.container {
  display: flex;
  flex-direction: column;
}

.container .down {
  flex-grow: 1;
}

Flexbox allows setting flex-grow to 1 on the child div, causing it to expand to fill the remaining vertical space.

3. Height Calculation

.up {
  height: 100px;
}

.down {
  height: calc(100% - 100px);
}

This method uses CSS height calculation to subtract the height of the first child from 100%, giving the second child the remaining height.

4. Overflow Hidden

.container {
  overflow: hidden;
}

.down {
  height: 100%;
}

Overriding the default display behavior by hiding overflow allows the child div to fill the parent's height.

5. Max-Content

.container {
  height: 100%;
}

.down {
  height: max-content;
}

Max-content property value sizes the child div according to its content, effectively occupying the remaining space.

Note that some methods may have limitations or browser support restrictions. Choose the appropriate method based on your specific requirements.

The above is the detailed content of How Can I Make a Div Child Fill the Remaining Space of Its Parent Container?. For more information, please follow other related articles on the PHP Chinese website!