Fixed the bottom footer. Made it fixed on scrolling.

[kaguillera]

Please review if this is what you want for #3331 @techtonik

[techtonik]

I am still struggling to get my working environment at #3165, so I can't test ATM.

[kaguillera]

No problem

[techtonik]

There is still a scrollbar even when there is no content.

[kaguillera]

What browser are you using. I may have to test it on all (or as much as I possibly can)

[techtonik]

I have only Chrome and Firefox, and I believe that was Chrome. In any case it seems that the issue is caused by the way the header is added to the page, because the height of scrolled area looks equal to header height.

[techtonik]

Also, fixed border may eat up precious space on mobile devices. So it would be nice to just fix the screen height calculation to avoid the margin / padding / whatever makes this taller than it is.

[techtonik]

Found a way to fix our layout http://stackoverflow.com/questions/8257311/modern-way-to-markup-100-height-layout-in-html5-and-css3

[kaguillera]

!m @techtonik I wil try it

[techtonik]

@kaguillera, go ahead! =)

I played a bit with CSS table layout in Google Chrome dev tools, but I am not sure how it will work in other browsers. I gave a display:table, moved fixed size <header> and <footer> out of #wrapper (I don't know why as extra #wrapper is needed there), and set display:table-row on them. Then I have to wrap central #main into additional <div>, because #main should be a display:table for managing central columns height to 100%, and top level needs display:table-row to redistribute its height among children.

I also used border-collapse: collapse on body table, because border became invisible. And then there was something to do with bottom footer to fix content alignment due to changed model from div to table row.

[chadwhitacre]

Obsolete with #3718 .