As we all know HTML + CSS were designed for styling documents. Building an application layout where the screen is split up into various areas, vertically and horizontally is not easy. Especially as those areas start expanding, collapsing & scrolling.
Buy using display:table, absolute positiong, and nesting elements properly we can arrive at a workable solution that doesn't require hard-coding positioning values all over the place. This is not a revolutionary concept. It's more like "let me just put it here so I'll use it next time, instead of spending an hour figuring it out". And maybe it'll save you some time too.
Try the demo. Use the buttons to toggle the various elements, and watch the layout adapt itself. Then read the source, there's literally only about 30 lines that are remotely interesting.
In Andorid the tab bar is between the header & the content. While in iOS it's stuck to the bottom of the screen. Since we're using document flow to get the height to adapt itself we're dependant on the DOM order. So we're generating two tab bars. You'd use your JS framework to show/hide the right one.
This is the pink row above the main block. We needed it our app to show network status, but you might not need it. I left it because it shows how to use nesting to avoid hard-coding positioning values.
