CSS: Why do I get a vertical scrollbar with this simple HTML? (100% height div)
In Firefox 3.5.8 on Windows, I get a vertical scrollbar when I use this HTML: 

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>Haloooo1 - T3</title>
    <style type="text/css">
      html, body, div {height: 100%; margin: 0; padding: 0; }
      #main {
        width: 320px;
        background:#7C7497;
        height : 100%;
        margin: 0 auto;
      }
    </style>
    </head>
    <body>
    <div id='main'>
    <p>Hello</p>
    </div>
    </body>
    </html>


![alt text][1]

**Q1.** Can anyone explain why?   
Can anyone explain how to remove it?  

**Q2.** Can anyone explain why there is a cushion of whitespace above the div?  Can anyone explain how to remove it? 


  [1]: http://i42.tinypic.com/ridx21.jpg
CSS: Why do I get a vertical scrollbar with this simple HTML? (100% height div)
===

In Firefox 3.5.8 on Windows, I get a vertical scrollbar when I use this HTML: 

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>Haloooo1 - T3</title>
    <style type="text/css">
      html, body, div {height: 100%; margin: 0; padding: 0; }
      #main {
        width: 320px;
        background:#7C7497;
        height : 100%;
        margin: 0 auto;
      }
    </style>
    </head>
    <body>
    <div id='main'>
    <p>Hello</p>
    </div>
    </body>
    </html>


![alt text][1]

**Q1.** Can anyone explain why?   
Can anyone explain how to remove it?  

**Q2.** Can anyone explain why there is a cushion of whitespace above the div?  Can anyone explain how to remove it? 


  [1]: http://i42.tinypic.com/ridx21.jpg