Preparing the DOM for a Single Page Application

Question

What I am trying to achieve appears to be simple. I am assuming that all content visible on a page, is a child or grandchild of the tag of a HTML page? This text for example must be related to Body.

And this is a tree structure basically starting (visually) with Body.

I want to make a Single Page Application with JavaScript. But I need to prepare the DOM and here is where I struggle.

How do I set up the body of the page so that:

• There is no scroll bars
• The Body is always filling the entire content area of the browser (if it does not already)
• Break out of CSS box model (appendChild 10 times stacks those elements, not flows them)
• Any children Divs from Body, also by default break out of the CSS box model too.

I have searched for each step individually but I do not use JQuery, and to be honest, I would prefer to get rid of CSS too all but for the most basic of tasks. I would just like to have a known viewable region and be responsible for its positioning, sizing and content with JS.

Or. If you are similar with Flash. I want to treat the Body as my Stage and use it like a Display List with NO_SCALE enabled. Meaning that when you resize, that should "invalidate" the layout (that is upto me as the developer).

I am not the first person in the world to ask for this. So if you could even point me in the right direction, I would appreciate it.

Answer 1

Try CSS based solution to the fullest, then move on with Javascript. Following would give you pretty much what you want

• There is no scroll bars

• The Body is always filling the entire content area of the browser (if it does not already)

  html, body { margin : 0px padding : 0px; border : 0px; overflow : hidden; position : absolute; left : 0px; top : 0px; }

• Break out of CSS box model (appendChild 10 times stacks those elements, not flows them)

• Any children Divs from Body, also by default break out of the CSS box model too.

  put this first

  * { position : absolute; }