Heidi Langeneckert wrote:
> www.transmediacorp.com
> How to get 100% height on a centered <div> that contains the main
> content.
> Better yet, how to place a footer block underneath it that always
> sits at the bottom, and touches the bottom of the main content block.
> Theres got to be a trick to it.
I don't think of it as a trick, but I don't use it much either.
Window-sizes and amounts of content is too much of a variable to bother,
IMO.
1: the 'gap above the footer' problem in your page is caused by
'collapsing margins'[1], which is the margin-bottom on the last
paragraph escaping #whole_page and ending up between that container and
the footer.
2: I don't know whether you want the footer to stay within the 100%
height, or below it. I styled it for the former, and that's a bit more
unreliable than the latter since the height of the footer itself is a
variable in most cases.
Anyway, if you feel like testing my approach, then you just have to put
the following in your 'in page-head' style block.
-------------
/* test-styles overriding colliding styles in original stylesheet with
!important */
html, body {height:100%!important;}
#whole_page {min-height: 100%!important; margin-top: -1.1em!important;
padding: 1px 0!important; _height: 100%; _overflow-x: hidden; position:
relative;}
#header {margin-top: 1em!important;}
-------------
The above achieve the 100% height effect in Opera 9, Firefox 2 and IE6,
and I didn't test in other browsers.
- Collapsing margins are contained by the paddings on #whole_page, so
there isn't any gap.
- The #whole_page is moved up by margin-top, to make space for the
footer at the bottom. Then the #header is pushed down by another margin,
so it, and the other content-carrying elements, stay within the window.
- I did not look at your stylesheet - just overrode colliding styles
when I observed them, so you'll have to make necessary changes to your
own styles at your end, if the above solves your problem.
- I did not fine-tune the test-styles to the last pixel either, and I've
used the 'leading underscore' hack to target IE6.
- The paragraphs for 'extra white space' should be deleted - so you can
see the effect, but other than that the source-code is unchanged.
Now, give the '100% height' a good dose of font-resizing in browsers,
and it should work pretty much as intended.
regards
Georg
[1]http://www.w3.org/TR/CSS21/box.html#collapsing-margins.
--
http://www.gunlaug.no
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
