Question

Ok, so I have a very simple stack:

---------
|   A   |
---------
|   B   |
---------
|   C   |
---------

Both A and C have known and fixed heights. Yet the window height (a mobile viewport) is unknown. I’m trying to get B as tall as possible. I’m going to use overflow-y: auto, so overflowing is not an issue. The actual issue is expanding it to an unknow (but calculable) value.

I have solved this by calculating $(window).height() - ($(A).height + $(C).height()), but there must be a better way (or a jQuery plugin).

Answer 1

Make sure that the container has a non-static positioning, then make B position: absolute; and set both top and bottom to the heights of A and C, respectively.

For example, if A were 20 pixels tall and C 40, your CSS for B would look something like this:

#b {
    bottom: 40px; /* Height of C */
    left: 0;
    position: absolute;
    right: 0;
    top: 20px; /* Height of A */
}