I have a trivial page with body having an image background, with background-size:cover. I set html { height:100% } to fill up the entire page regardless of the content amount. Up to this point everything worked as expected.

I've added a div and set position:absolute; right:0; width:200px; This, again, worked as expected, until I added content.

When this div is populated so much that the contents take up more space than the height of the page, the scroll bar appears. Scrolling down reveals that the background image does not actually cover the entire page.

This is due to the fact that my div is taller than 100% of the HTML height.

How can I address this?