The answer to whether what you're doing is a good solution (which I will interpret as concise, not overly complicated, and as compatible as possibe) depends on what exactly you're trying to do. Because you don't provide much detail on that end, let me give you the rundown.
The generally best approach (by the definition above)
In most cases, you won't need any special properties and can simply set the height or min-height of your three containers to the appropriate value, since their parent (body) already has a height of 100%. Because everything is underneath each other, there is no need to use the position property in any way.
Because of the way html works by default, these containers will retain their size until their content will require more space; then they will expand to accomodate the content. This is a feature, not a bug.
If you want to prevent this, set the overflow to hidden or scroll, which will help retaining the original container size (though in case of scrolling, scrollbars might mess with your plans).
Alternative solutions
Sometimes layouters get weird ideas of what you need to put on a webpage, and weird ideas might require weird solutions. Let me try to come up with a list of options to choose from:
- The approach you took works if you need to split the viewport into exact shares of fix values, disregarding the container's contents entirely. It's compatible with any relevant browser by a long shot, but it will (assuming you handle the overflow so it doesn't stretch the container) likely result in cut-off content on extreme screen sizes (if you have primarily text content) or aspect ratios (if you have primarily image content); to be honest, probably both - but if you're working on a game, for example, maintaining a relative container size can easily be more important than their contents
- Flexboxes will "only" give you a benefit of stretching the content over the whole screen if you're desperately trying to avoid setting a
height, but it shouldn't result in any unforeseen errors, aside from the compatibility issues. As an additional bonus, you can rearrange the containers with the order property, which none of the other methods will accomplish.
- Using
absolute-positioned elements, you can entirely disregard height attributes and just set both top:0 and bottom:0 (while having a relative-positioned parent) to stretch a container over the entire height, then position containers inside on the top and bottom the same way. Not many cases in which this is more useful than the above two come to mind, and you won't like fixing any problems you encounter on the way, but if you're developing for browsers thathave issues with overflow properties, you could look into it.
- The
vh unit, apart from suffering from compatibility issues about the same, can be used, but don't pose any actual benefit over using percentage values. They are used to size elements relative to the viewport dimensions, which your percentage solution does just the same for this specific use case.
- You could use a
table, though that's commonly considered bad practice for various reasons and will on top of that be the most complicated solution of all of these, so I won't go into it.
So, all in all, there are many ways to accomplish what you want (and I possibly even missed some), and without providing info about the exact nature of what you're trying to do, there can be no exact recommendations other than a quick summary of what I wrote above: If you plan on putting content in the top and bottom container and you can't use the topmost solution, flexbox will work the best for you; if you need the containers to take up precisely a certain percentage, go with your original solution; and only if both aren't suitable, expand your search to the other options.
