I design complex systems, often with a plethora of various states of a screen where content changes from zero to hero.
Let’s say, I have a screen that is 1440 x 900 – it contains all the menus and some tabular content. Now, within this screen, I need to display the details of the table row in a sidepanel displayed above she table. And I have two states:
-
The first state is the zero state, with a 50px high header, 100px of content, and a 50px action bar pinned to the bottom.
-
The second one contains the same 50px high header, 1000px of content, and a 50px action bar pinned to the bottom.
Now, for the first one, I need to set it to FILL the parent frame vertically, while for the second – I must make it HUG the content.
I can also set the sidepanel manually to 900px of height (or: min-height), and make the content FILL it, so that the bottom bar is always pushed to the bottom – that is for the first state, while the other one needs to HUG anyway.
With the header, the action bar, and the content elements being components evolving on their own, this results in constantly reviewing if some of the dozens of states doesn’t need the behavior to be changed from HUG to FILL and the other way around.
What I believe would be super handy, is being able to set the behavior to HUG, while also setting the min-height to FILL. Maybe someone else would also find it useful?