I am working on a standard header/navigation for my website.

I started with having a CSS "height" value of 100% for the html, body elements but this resulted in the wrong layout.

However, when I change the CSS height property from "100%" to "auto", the layout is correct, but I lose the anchors in the navigation. Why is this?

Here's my CSS:

html,body {
    height: auto;   /* This is the only property that I'm toggling */
    margin: 0; 
}
body {
    margin: 0;
    min-width: 978px;
    font: 12px/16px Arial, Helvetica, sans-serif;
    color: #000;
    background: #000001 url('../images/bg-body.jpg') no-repeat 50% 0;  
}
#nav {
    position: relative;
    float: left;
    margin: 0;
    padding: 0 2px 0 271px;
    list-style: none;
    background: url('../images/sep-nav.gif') no-repeat 100% 0;   
}
#nav li {
    float: left;
    padding: 11px 0 0 2px;
    height: 35px;
    width: 128px;
    line-height: 22px;
    font-size: 18px;
    text-align: center;
    background: url('../images/sep-nav.gif') no-repeat 0 -1px;
    display: inline;    
}
#nav li a {color: #FFFEFE;}
.....

I compared the computed CSS in Firebug when the html, body height property was set to "auto" vs. "100%" and they were the same.

Can somebody please shed some light on how retain the anchors in the navigation while setting height to "auto"?

Thanks for your help.