How can you make a div occupy the rest of the space below a div that has a height that varies?

edit

You can use the CSS flexbox layout to achieve this.

First, you need to create a container div that will hold both the variable-height div and the div that should occupy the rest of the space. Set the display property of this container to flex and the flex-direction property to column.

Next, set the height of the variable-height div to auto so it can adjust its height according to its content.

Finally, set the height of the div that should occupy the rest of the space to 100% and set the flex property to 1 to make it expand and fill the remaining space.

Here is an example CSS code:

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

.variable-height-div { height: auto; }

.fill-space-div { height: 100%; flex: 1; }

And here is an example HTML code: