I've have a site with Head<div> and foot<div>. The Cont<div> fills up the rest & have scrollbar if needed.My code is OK for IE & GoogleCrome but not for Firefox
I've created a html page with 3 div's
div Header: Fix height, no scrolling
div Page: Should adjust to rest of the space. Right scrollbar (in the PageDiv) if needed.
div Footer: Fix height, no scrolling
this is a cleaned up version of my html code
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body style="margin:0px; padding:0px;">
<div id="header">
<img src="header.jpg">
</div>
<div id="page" style="background-image:url(pagebg.jpg);>
<table width="1024";><tr>
</tr></table>
<img src="page.jpg";>
</div>
<div id="footer">
<img src="footer.jpg">
</div>
</body>
</html>
this is a cleaned up version of my style.css file
/*header, page and footer div's are declared here with "ID" tags*/
#header {
position:absolute; top:0; left:50%; margin-left:-512px;
width:1024px; height:149px}
#page {
-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;
position:relative; top:149; left:50%; margin-left:-512px;
width:1024px; height: calc(100% - 171px);
overflow:auto; overflow-x:hidden;}
#footer {
position:absolute; bottom:0; left:50%; margin-left:-512px;
width:1024; height:22;}
This code works fine on IE and Google Chrome but on Firefox the PageDiv does not get this scrollbar and if the content of the PageDiv is bigger than the space left, the whole page get a scrollbar but the footer comes on top of the content and if you scroll the footer goes up and you see the rest of the page content under the footer. How can I fix this for FireFox?
I've created a html page with 3 div's
<pre><nowiki>
div Header: Fix height, no scrolling
div Page: Should adjust to rest of the space. Right scrollbar (in the PageDiv) if needed.
div Footer: Fix height, no scrolling
this is a cleaned up version of my html code
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body style="margin:0px; padding:0px;">
<div id="header">
<img src="header.jpg">
</div>
<div id="page" style="background-image:url(pagebg.jpg);>
<table width="1024";><tr>
</tr></table>
<img src="page.jpg";>
</div>
<div id="footer">
<img src="footer.jpg">
</div>
</body>
</html>
this is a cleaned up version of my style.css file
/*header, page and footer div's are declared here with "ID" tags*/
#header {
position:absolute; top:0; left:50%; margin-left:-512px;
width:1024px; height:149px}
#page {
-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;
position:relative; top:149; left:50%; margin-left:-512px;
width:1024px; height: calc(100% - 171px);
overflow:auto; overflow-x:hidden;}
#footer {
position:absolute; bottom:0; left:50%; margin-left:-512px;
width:1024; height:22;}
</nowiki></pre>
This code works fine on IE and Google Chrome but on Firefox the PageDiv does not get this scrollbar and if the content of the PageDiv is bigger than the space left, the whole page get a scrollbar but the footer comes on top of the content and if you scroll the footer goes up and you see the rest of the page content under the footer.
How can I fix this for FireFox?
Modified by cor-el
All Replies (1)
This site uses a wiki syntax that isn't friendly to posting raw HTML. Could you provide a link to your page, or if that's not possible, create a test case on jsfiddle: http://jsfiddle.net/