All the same 100% height and margin

Everyone knows the story about the block model with indentation and width in older versions of IE and with the " consortium " model.
And yet, if I want to make a div with one hundred percent height and indents from the parent, then the height of the layer increases by the amount of this indent.

It means a cross-browser solution without laying empty divs for indentation. ( http://www.csscreator.com/node/12238 )

How to be?

As it is:

How to:

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" <br> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" > <br><br> < html xmlns ="http://www.w3.org/1999/xhtml" > <br> < head > <br> < meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" /> <br> <br> < title > , </ title > <br> < style type ="text/css" > <br> html {<br> height: 100%;<br> }<br> body {<br> margin: 0;<br> padding: 0;<br> height: 100%;<br> }<br> #content {<br> background: #EEE;<br> padding: 10px;<br> margin: auto;<br> width: 960px;<br> height: 100%;<br> }<br> </ style > <br> </ head > <br> < body > <br> < div id ="content" > <br> <br> </ div > <br> </ body > <br> </ html > <br> <br> * This source code was highlighted with Source Code Highlighter .