HTML Logo by World Wide Web Consortium (www.w3.org). Click to learn more about our commitment to accessibility and standards.

Moving forward with Composr

ocPortal has been relaunched as Composr CMS, which is now in beta. ocPortal 9 will be superseded by Composr 10.

Head over to compo.sr for our new site, and to our migration roadmap. Existing ocPortal member accounts have been mirrored.


Making the footer stay on the bottom of the browser window

Login / Search

 [ Join | More ]
 Add topic 
Posted
Rating:
#42289 (In Topic #9441)
Avatar

For anyone wanting the footer to stick to the bottom of the browser window, rather than always just appear at the end of the page, here are a couple of techniques.
The old ocPortal 3 CSS/templates did this, but only via Javascript, which is something we really wanted to move away from in v4 (v4's CSS is very different, more robust).

I'm not posting these here as a suggestion that anyone should use them. They aren't well tested, and have to do some weird things to work around the limitations of CSS - so potentially could cause rendering problems in various places. In other words, use at your own risk.

Easy way

This way won't work on IE6. It also sticks the footer to the bottom of the window even if the page has scrollbars.

Put this into nocache.css:

Code

.bottom {
   position: {$BROWSER,ie_new,fixed,{$BROWSER,ie,static,fixed}};
   bottom: 0;
}

#global_surround {
   margin-bottom: 50px;
}

Hard way

Credit here has to go to the writer of this website, which I based my code off: CSS Layout - 100% height

For this to work, the HEADER and FOOTER templates need changing.
In HEADER change:

Code

<body class="re_body" onload="scriptLoadStuff()" id="main_website">
to:

Code

<body class="re_body" onload="scriptLoadStuff()" id="main_website">
<div id="body_inner">
(i.e. add one new line)
In FOOTER change:

Code

</body>
to:

Code

</div>
</body>
(i.e. add one new line)

And then add this to global.css:

Code

html#main_website_html, body#main_website {
   height: 100%;
}

.bottom {
   position: absolute;
   width: 100%;
   bottom: 0;
}

#global_surround {
   padding-bottom: 50px;
}

#body_inner {
   position:relative; /* needed for footer positioning*/
   height:auto !important; /* real browsers */
   height:100%; /* IE6: treats as min-height*/
   min-height:100%; /* real browsers */
}

EDIT: Fixed a problem with display of auto-resized iframes.


Last edit: by Chris Graham


Become a fan of ocPortal on Facebook or add me as a friend. Add me on on Twitter.
Was I helpful?
  • If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
  • If so, please let others know about ocPortal whenever you see the opportunity.
  • If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying ocPortal on fun personal projects.
  • If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Back to the top
 
Posted
Rating:
#42301
Avatar

Community saint

Very cool thanks.

I run http://otakuplayground.com and am hopping to make themes and other things for ocportal even though I no longer use it for otakuplayground.com I still love it and feel it could go far with the right help. It needs themes and needs people to advertise for it.
Back to the top
 
Posted
Rating:
#42318
Avatar

Honoured member

very cool indeed !    :thumbs:

ps. I had to add the extra '.bottom' entries to the existing '.bottom'.

Thanks
Back to the top
 
Posted
Rating:
#58983
Avatar

Fan in action

Thanks, i was wondering how to get footer stay at bottom and hard way worked  :thumbs:

Back to the top
 
There are too many online users to list.
Control functions:

Quick reply   Contract

Your name:
Your message: