When a webpage doesn't have much information, the footer section of the template comes up very high. With a contrasting color, this doesn't look good. Anyway to keep the footer more toward the bottom of the browser? Of course if the age has more information than can be displayed vertically, it should push the footer down as per usual behavior.

Thanks.

Hi

You want the footer to stick to the bottom of the page?

Cheers
Paul

not exacty, pin I guess is a bad choice of words. Currently the footer area (the color band on the bottom) will take up say 2 or 3 rows if you have enough content to fill in most of the browser window or is longer than the browser vertical area.

However, if the content is short, say 1 line. that color band comes up to meet the bottom of the content, and it's huge. Is there anyway to restrict this band to be no longer than say 1 row larger than the data that is being displayed in the area? Just like it would behave in the first case.

Do you have a link for your site?

Cheers
Paul

Sure, try this page test.siballet.org/index.php/company/boards and you will see what I mean. Other pages, I've added blank lines in the content to prevent this, but that's just a bandaid solution.

Hi waikongchung,

I asked a similar question in another thread, please take a look in case it might help for what you are asking about:
www.joomlabamboo.com/index.php?option=com_kunena&view=topic&catid=681&id=115549&Itemid=215

I will take a look there, thanks.

Thanks guys

ok, I did try the suggestion, but like I said I should not have used the word PIN.

I want it to appear 'normally'. It is just the case where the content is very short, say 1 line of text. The whole bottom area (which isn't just the footerwrap) moves up the meet the content. I'm trying to limit the color band area to be say no more than certain pixels higher than what the footer area dictates.

As of now, it's acting as expected in that the main content area is small, so the bottom colored area simply begins where main stops and fills in rest of the browser window. Another way to put it is that I want to stretch the main body area to say 80% of the browser height if its less than the height of the browser.

Hope this makes sense

ok, so I stop being lazy and actually worked at this a bit and did some research and fooling around. Maybe this will help someone else with the same issue, my solution is:

#zen-wrap-inner {
min-height:100%;
position:relative;
}

#mainWrap {
padding-bottom: 150px;
}

#footerwrap {
position: absolute;
bottom: 0;
left: 0;
}

The only issue is the padding-bottom will have to be manually adjusted depending on what you are putting in your footer. 150px works for me. If someone has the time, improvement would be to make that dynamic based on footerwrap height.

Thanks for the update

Cheers
Paul