height and width on html and body elements

Viewed 108674

If I have the following markup

<html>
<body>
<div id="wrapper">
<div id="container">
<p>Lots of pragraphs here</p>
</div>
</div>
</body>
</html>

with the following styles

html, body, #wrapper
{
width: 100%;
height: 100%;
}
#container
{
width: 960px;
margin: 0 auto;
}

why does not my html, body and wrapper elements extend to 100% height of the browser/view port in FF13. The html, body and wrapper stop vertically about some distance from the bottom when looking in Firebug. The container div extends to the full height as it's height is determined by the content.

(1263px X 558px for html, body, wrapper) and (960px X 880px for container)

Looking at default 100% the above happens as the first image below shows. But when I zoom to the last poosible zoom in, the above does not happen as the second image below shows and the html, body, wrapper extends to the full height.

(4267px X 1860px for html, body, wrapper) - (960px X 1000px for container)

enter image description here enter image description here

2 Answers
Related