[jskidd3]

Hi,

I have a little question about page layouts.

Google (and a huge amount of other websites) have a way of spacing their page out perfectly, their footer is stuck perfectly to the bottom of the page without the need to scroll down to see it. The only way I know they could do this would be for example, set the navigation to 10%, content to 80%, and footer to 10%. I did notice however that they have used pixels to set the height of the footer and navigation bars.

With my site jskidd3.com I am trying to achieve something similar using pixels but I can't figure out how to do it. The main content area is 90% of the screen and my navigation and footer are set to 50%. To put it bluntly, I would just like the main content to perfectly fit in the centre of the page whilst using a pixel based navigation and footer.

If what I'm asking for isn't clear please say.

Thanks,
Joel

[andrewsw]

You mean fixed to the bottom of the viewport, rather than the bottom of the page? Fixing the footer to the bottom of the page (its content) happens naturally.

Here is a good tutorial. Using position: fixed; is the easiest way.

The example uses height: 100%;. This only works if all parent-elements (all the way to body and html) have this height as well, or the immediate parent has a fixed height.

I suspect Google, and other pages, use a more complicated technique, perhaps using Javascript and the resize event to keep the footer correctly positioned.

BTW I notice that your page is tentatively accepted as HTML5 by the validator; never seen that before

Your page also has a pop-up of some kind which my browser disabled.

This post has been edited by andrewsw: 11 February 2013 - 05:35 AM

[jskidd3]

Thanks Andrew!

Sorry about the pop-up thing, was just testing some Javascript, I have removed it now. If you check the site again now you'll see that the footer is at the bottom of the screen, thanks very much! Seems so simple I just couldn't figure it out. My question now is, do you know how I would stretch the main content area to go right down to the footer? Something along the lines of min-height: 100%?

Thanks again

This post has been edited by jskidd3: 11 February 2013 - 05:57 AM

[andrewsw]

You seem to have adapted that tuturial very quickly . It solves the problem you mention:

Quote

The container div has a min-height:100%; this will ensure it stays the full height of the screen even if there is hardly any content. Many older browsers don't support the min-height property, there are ways around it with Javascript and other methods but that is out of scope for this article. The container div is also set to position:relative; this allows us to absolutely position elements inside it later.

Of course, the best solution is to add more content

[jskidd3]

Sorry, I can't quite seem to get this working. Maybe I said it stupidly, this is a clearer representation of what I want to achieve:



Setting the #mid div (my main content area) to 100% doesn't seem to do anything. I'm assuming this is because the parent has a mid-height set and not a proper fixed height? Either way, I tried setting the parent to height: 100% as well as the #mid div but it didn't fit perfectly up to the footer. (it was too big)

This post has been edited by jskidd3: 11 February 2013 - 06:38 AM

[andrewsw]

Is your page up-to-date with your changes? In which case I can't see that you have followed the tutorial that I linked to.

Create an entirely new page;
Study the tutorial and create the page that it guides you through;
Once you understand how it works, apply the principles to your own page.

[jskidd3]

Gotcha, thanks very much Andrew.

[andrewsw]

jskidd3, on 11 February 2013 - 07:21 AM, said:

Gotcha, thanks very much Andrew. />

No worries. If you want your mid section to also stretch to the full height of the browser (less the footer height) then you'll need to investigate css full height div, one technique for which is to create a faux column.

But, as mentioned, the best solution is to have more content

[FerretHolmes]

Another good sticky footer I like to use sometimes is Sticky Footer. I think that's what you are looking for anyhow. Super simple and cross-browser compatible.