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
?