I’m working on a web app that I want to operate more like a standard OS app. It is similar in layout to iTunes where I have a top header, a menubar beneath it, and then a left-sidebar and a main content area. The goal is that everything stays where it’s at on the screen and only the main section scrolls (because it has a grid/table of content).
I can accomplish this by using absolute positioning, adding overflows, specifying top/left/top/bottom, and automatic scrolling when applicable. However, I’m not sure this is the best approach. I did some research here on SO and the web and didn’t find a conclusive answer.
I know it works, but is it a valid or acceptable approach? My goal is to get it working but working using proper standards and acceptable approaches.
I could use a Javascript framework that accomplishes this as well (extjs, some jquery libraries, etc) but I think they do the same thing, they just do it dynamically at page load instead of specifying it up front.
CSS has pretty lousy support for web application-style UI layout. There are promising specifications on the way, like css3-grids and css3-flexbox. But the browser support is lacking, especially the css3-grid.
When I implement a web app today, position: absolute, seems like the least worst option. It’s flexible enough and meets most of the requirements.
There is a good blog post that talks more about this: http://blog.stevensanderson.com/2011/10/05/full-height-app-layouts-a-css-trick-to-make-it-easier/