Home/ Questions/Q 7711675
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T01:26:07+00:00

Is it possible to simply auto-height a child div to the remaining height not

  • 0

Is it possible to simply auto-height a child div to the remaining height not being used by other component of it’s parent? For the below example, the .body would only be like 20px high, because it’s only using that much for the inner html. Is it possible for the .body to automatically consume the unused height of the .parent? e.g. .parent 200px – .head 30px – .foot 30px = .body 120px?

The sample below will display the .parent yellow box much taller than the used space. If you set .body to “height: 100%”, it’ll use the parent’s height and not respect the .head or .foot elements.

<html>
<head>
<style type="text/css">
.parent {
  width: 200px;
  height: 200px;
  background-color: yellow;
}

.head { height: 30px; background-color: blue; }

.body { background-color: #999; }

.foot { height: 30px; background-color: green; }

</style>
</head>
<body>
<div class="parent">
  <div class="head">I'm the head</div>
  <div class="body">I'm the body</div>
  <div class="foot">I'm the foot</div>
</div>
</body>
</html>

This is only an example. In my project the .parent height can only be reasonably set in the .parent element. Plus the .parent height is essentially dynamically set by the back-end code. The three inner div organization is because the body is collapsible and I have rounded corners for the head and foot.

Any suggestions are well appreciated!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This can easily be achieved with negative margins!

    1. Set .body to 100% height
    2. Assuming that the height of .head and .foot is known, you can add a negative top + bottom margin equal to the respective heights of .head and .foot.
    3. Because of the source ordering, the .body will “cover” .head. To counter this, add position: relative to .head.
    4. The inner content of the body need to be shifted down a bit. You cannot add padding to .body directly. Better, add another dive inside .body with padding top + bottom set to desired height.

    Demo here

    Variant of the above example:

    1. Set .body to 100% height
    2. Assuming that the height of .head and .foot is known, you can add a negative bottom margin equal to the sum of heights of .head and .foot.
    3. Since .body will attempt to flow outside the parent, add overflow: hidden to the parent.

    Demo here

    • 0