Rechercher dans l’assistance

Évitez les escroqueries à l’assistance. Nous ne vous demanderons jamais d’appeler ou d’envoyer un SMS à un numéro de téléphone ou de partager des informations personnelles. Veuillez signaler toute activité suspecte en utilisant l’option « Signaler un abus ».

En savoir plus

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?

Modifié le par cor-el

Toutes les réponses (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/