In full screen mode the footer displays at the bottom of the screen as intended. If however there are several toolbars open in IE9 / Firefox / Opera the footer bleeds into the content and there is no vertical scrollbar.

If I set overflow:auto in the body and remove bottom:0 from the footer styling, as in the link, the footer displays as it should with the toolbars on but in full screen mode there is a big gap between the footer and the bottom of the page! How do I keep the footer at the bottom of the screen in both full screen mode and when using toolbars?

http://mbmitservices.co.uk/MMA/index.html

body{
font-family: 'Ubuntu Condensed', sans-serif;
width:100%;
height:100%;
color:#ffffff;
overflow:auto;
}

/*footer styling */
#documentFooter{
width:100%;
margin-top:20px;
padding-top: 5px;
margin-bottom: 5px;
text-align: center;
font-size: 16px;
background-color: #2864c4;
border-bottom: 2px solid #fff;
border-top: 2px solid #fff;
color:#ffffff;
position:absolute;
left:0;
/*bottom:0;*/
}