Question

I’m working on a school project, and I have to create a simple presentation webpage. The problem is that the webpage doesn’t work as expected in Firefox, while in Chrome and othet WebKit browser it’s all fine.

My problem is here: http://c303.usv.ro/~HPC/ (please don’t change the language in English, as you will not be able to see my problem). If you go to “Echipamente” in Chrome, you’ll see that the “#content” div has some nice scrollbarls and the footer stays at the bottom. If you’ll do that in Firefox, the scrollbars no longer appears and the footer seems to go somewhere under the visible part of the webpage. As a workaround I use:

function mozillaFix(){  
    return; // we shouldn't use this
    $('#content').height($('#maindiv').height() - $('#topheader').height() - $('#copynote').height() - 40)
    $('#leftmenu').height($('#maindiv').height() - $('#topheader').height() - $('#copynote').height() - 40)
}

but I guess that this is not the mos elegant solution. Where could be the issue?

Answer 1

Set the max-height with Javascript to the desired height (I tested it with FireBug to with max-height: 400px;). Then, Firefox will make a nice scrollbar, and show the footer as you wanted.

---

As found on the internet, the solution is defining the height of the container of the div. If you have the following CSS it should work:

html, body {
    height: 100%;
}