Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

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

more options

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)

more options

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/