css make footer always be at the bottom code example

Example 1: why is my footer not at the bottom html

#footer {
   position:fixed;
   left:0px;
   bottom:0px;
   height:30px;
   width:100%;
   background:#999;
}

//name footer id="footer"

Example 2: css footer always at bottom but visible

/* Fix the footer to the bottom */
footer { position: fixed; }