Div na 100% wysokości okna jak w IE Opcje

[piechnat]

Witam…

Jak zrobić warstwę, która będzie miała wysokość 100%, gdy tekstu w niej będzie mało, a kiedy tekstu będzie więcej niż wysokość to warstwa zwiększy swoje rozmiary dostosowując się do wysokości tekstu (jak w IE) a nie tak, że tekst wyjedzie za nią, zostanie ucięty lub pojawią się paski przewijania?

Jak na razie wymyśliłem sposób w JS, ale to chyba nie jest dobre opierać layout na skrypcie?

Kod

<script>
  function winHeight() {
    if (typeof window.innerHeight == 'number') return innerHeight;
    return document.getElementsByTagName('html')[0].offsetHeight;
  }
  onload = onresize = function() {
    var box = document.getElementById('box');
    var tmp = winHeight() - box.offsetTop;
    if (tmp < 0) tmp = 0;
    box.style.height = tmp + 'px';
  }
</script>
<style>
  html, body { background: green; }
  body { text-align: center; margin: 0px; padding: 0px; border: 0px; }
  #content { background: yellow; width: 600px; margin: 0px auto; }
</style>
<div id="content">
  text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text
  <div id="box"></div>
</div>