At the moment I have a large <div> that I'd like to add a bottom margin to, to push it up from the bottom of the page. However this currently has no effect because its parent, the <body> tag, is smaller than it, as you can see here:
The body tag is highlighted in blue and brown, but you can see my div (the white border) extending below it.

However if I apply the trick of setting the <body> and <html> tags to height: auto and min-height:100% to make sure they fill the entire page, all of my inner content loses its size, because they all use percentage heights and no longer have a parent with a fixed height.
How can you use percentage heights if the parent tag has a height of auto?