html - div height not fully 100% at browser window in firefox but works great in chrome, ie & safari -

html - div height not fully 100% at browser window in firefox but works great in chrome, ie & safari -

i searched hours annoying issue on div 100% height of browser window. read 15 articles on stackoverflow , other forums none of them offered solution. gray bar @ left should 100% vertical browser window, not div content.

i tried min-height:100%, display:block, cell, table, table-cell, inline-block etc. can't work. , annoying part of it: worked @ beginning. apparently altered code in time saw problem late don't know worked.

the classes problem are:

maincontainer

.navigation .content

could please help trying/correct code? i'm pulling hair out here ;)

the page in question https://www.paybrick.com/example.php dead link

thank in advance!

use:

#maincontainer { display: table; height: 100%; min-height: 100%; /* seek give value in px instead of percent */ }

html css