Tìm kiếm hỗ trợ

Tránh các lừa đảo về hỗ trợ. Chúng tôi sẽ không bao giờ yêu cầu bạn gọi hoặc nhắn tin đến số điện thoại hoặc chia sẻ thông tin cá nhân. Vui lòng báo cáo hoạt động đáng ngờ bằng cách sử dụng tùy chọn "Báo cáo lạm dụng".

Tìm hiểu thêm

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?

Được chỉnh sửa bởi cor-el vào

Tất cả các câu trả lời (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/