klickme: css-box 100% in höhe des browserfensters anpassen

Beitrag lesen

hallo forum,

ich möchte eine css-box 100% der höhe des browserfensters anpassen.
in dieser box sind verschiedene andere mit bildern und text.
die hauptbox soll links und rechts einen gestichelten rand bekommen.

probleme:
obwohl ich der hauptbox auf 100% höhe geschaltet ist, wird sie in firefox nicht so angezeigt. die strichlinien ebenso.
woran kann das liegen?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="de">

<head>

<meta http-equiv="Content-Language" content="de" />
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

<style type="text/css" media="screen"><!--
html, body   {  margin: 0; padding: 0; height: 100% }
#main_box         { background-color: #ebee02; background-position: left bottom; margin: 0 auto; position: relative; width: 700px; height: 100%; border-right: 1px dashed black; border-left: 1px dashed black }
#inhalte                          { background-color: #f0f; margin-right: auto; margin-left: auto; position: relative; z-index: 0; width: 790px; float: left }

--></style>
 </head>

<body >

<div id="main_box">
 <!-- KOPF  -->
test

<!-- INHALTE  -->
  <div id="inhalte">
test
<br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  </div></div>

</body>

</html>