Posted on: 08/14/08 12:28pm
By: Anonymous (kyngchaos)
I've added side margins to the body of my layout, with a border, and a background different from the rest of the page content. I'm trying to apply this
technique[*1] to fill the content area for short pages to the bottom of the browser window.
The example from that site works for me, but I can't get it to work in my GL layout.
I added this to the top of my style.css:
CSS Formatted Code
html
, body
{
height
100%;
}
#pagebody {
min-height
100%;
background:#D4D2D0;
border-left: 2px solid #664D24;
border-right: 2px solid #664D24;
}
And added to header.thtml, just below the <body> tag:
<div id="pagebody">
And added a matching closing </div> to footer.thtml above the closing body tag.
It doesn't work. A short page will not fill the <div> to the bottom of the browser window. Is there something in the GL templates or css that's preventing this from working?
I tried adding the height:100% attribute to the existing body definition in style.css, but that didn't help.
Re: Filling page to browser window
Posted on: 08/14/08 03:38pm
By: beewee
A 100% heigth of DIV's is still a pain in the ass... I still haven found the perfect solution yet...
EDIT: the only easy, foolproof but old fashioned way so far is using a single table cell...
Re: Filling page to browser window
Posted on: 08/15/08 06:48pm
By: Anonymous (kyngchaos)
Figured it out!
First, with the help of Safari 3's page inspector, I saw that the <html> tag right off wasn't getting the browser window height. After some fiddling, I moved the "html, body {}" style into the page header, instead of in the layout style sheet.
Now the inspector showed that the html AND body were getting the browser height.
But not the #pagebody div. Oops, typo! No colon in the min-height attribute!
Now my short pages extend to the bottom of the browser window. Checked in Safari 3 and Firefox 3. Need to check various IE versions.