I have a query regarding an HTML sample I'm working on. The objective is to create a big yellow div that fills the entire page, covering the available area completely. It seems to be functioning well when there isn't much content within the div. In such cases, the whole page turns yellow seamlessly from top to bottom. However, the issue arises when I load the div with a large amount of text or other content, causing a white gap to appear at the bottom. Can anyone shed some light on why this whitespace is showing up and suggest ways to eliminate it, either through CSS adjustments or JavaScript interventions?
Just to clarify, I have attempted using negative margins and adjusting the bottom values, but these methods only shift the whitespace downward without actually removing it.
For reference, my browser is Firefox 32.
Thank you in advance for your assistance.
<html>
<head>
<style>
#f {
bottom: 0px;
top: 0px;
left: 0px;
right: 0px;
position: absolute;
display: block;
background: yellow;
}
</style>
<body>
<div id='f'>
... insert copious amounts of text here lorem ipsum ...
</div>
</body>
</html>