tags:

views:

37

answers:

0

Hello,

What I want is for my content div to have a minimum height of 100% of the window so that it's background image will repeat from top to bottom without any gap at the bottom.

If I set the body's height to be 100%, content that overflows the content div clips the background. I've set the body's min-height to be 100%, but the resulting height value doesn't transfer to the body's child element...the content div.

Ex.)

  • HTML height is 1000px

  • Due to actual content in the content div, the body's height results in 900px.

  • After CSS rule of 'min-height:100%', body's rendered height results in 1000px.

  • content div's CSS rule of 'height:inherit' results in 900px. Should it not be 1000px inherited from the body's height?

EDIT: Test this HTML to see what I mean. View it to see where I'm at, then change the body's CSS from "min-height:100%" to "height:100%" and see what I'm after.

Here's the file