Welcome to Geeklog Tuesday, September 17 2019 @ 06:25 am EDT

Geeklog Forums

Filling page to browser window


Status: offline

kyngchaos

Forum User
Junior
Registered: 29/03/06
Posts: 23
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 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:

HTML Formatted Code
<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.

Status: offline

beewee

Forum User
Full Member
Registered: 05/08/03
Posts: 969
Location:The Netherlands, where else?
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...
Dutch Geeklog sites about camping/hiking: www.kampeerzaken.nl | www.campersite.nl | www.caravans.nl | www.caravans.net

Status: offline

kyngchaos

Forum User
Junior
Registered: 29/03/06
Posts: 23
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.

All times are EDT. The time is now 06:25 am.

  • Normal Topic
  • Sticky Topic
  • Locked Topic
  • New Post
  • Sticky Topic W/ New Post
  • Locked Topic W/ New Post
  •  View Anonymous Posts
  •  Able to post
  •  Filtered HTML Allowed
  •  Censored Content