Dynamic Height Resizing of Multiple Elements

Question

Good afternoon,

I'm hoping to get some help/adice or a nudge in the right direction on the following problem:

I'm using a programme where I define a container and inside that container I'm placing three elements. First element is an image that occupies the top of the container. Second element is a label with some text and last element is a text box that takes up the bottom portion of the container. All elements have different heights.

If the user wants to make a container smaller, the dynamic resizing is handeled authomatically by the width property.

My issue is that if a person needs to resize the container vertically rather than horizonally, I'm not sure how to handle that and my search of a proper mathematical formula has only led to programming solutions, which I cannot use.

Could someone assist with some advice?

Answer 1

Let $y$ be the height of the container. Let $a$, $b$ and $c$ be the heights of each of the elements stacked vertically.

Clearly, in order for the elements to fit inside the container, we must have $a + b + c \leq y$. From here, we derive the remaining available space as $y - \left(a + b + c\right)$.

For the ideal case, we want to equidistribute the remaining space between the regions between the adjacent elements (there are $2$ of them) and also the regions above the top element and below the bottom element. Hence, we have $4$ shareholders for this remaining space.

Therefore, in this case, each shareholder receives $\frac{y - (a + b + c)}{4}$ amount of space.

Update

For example, let $A$ be the top element with height $80$ pixels, $B$ be the middle element with height $30$ pixels, and $C$ be the bottom element with height $20$ pixels. Let the container be of height $150$ pixels. To check, indeed we have $80 + 30 + 20 = 130 \leq 150$.

In this case, each space has height $\frac{150 - (80 + 30 + 20)}{4} = 5$ pixels.

Hence, we have $5$ pixels between the top border of the container and $A$, $5$ pixels between $A$ and $B$, $5$ pixels between $B$ and $C$, and also $5$ pixels between $C$ and the bottom border of the container.