Làm cách nào để có chân trang nổi để dính vào đáy của khung nhìn trong IE 6?

Tôi biết điều này sẽ dễ dàng với vị trí: cố định, nhưng không may là tôi bị mắc kẹt với việc hỗ trợ IE 6. Làm thế nào tôi có thể làm điều này? Tôi thà sử dụng CSS để được sạch sẽ, nhưng nếu tôi phải sử dụng Javascript, đó không phải là kết thúc của thế giới. Trong thực hiện hiện tại của tôi, tôi có một "footer nổi" trôi nổi trên khu vực nội dung chính và được định vị bằng Javascript. Việc triển khai tôi có ngay bây giờ không phải là đặc biệt thanh lịch ngay cả với Javascript, vì vậy câu hỏi của tôi là:Làm cách nào để có chân trang nổi để dính vào đáy của khung nhìn trong IE 6?

Có cách nào để làm điều này mà không có Javascript không?
Nếu tôi phải sử dụng Javascript, có bất kỳ giải pháp "đẹp" nào cho vấn đề chân trang nổi này không? Bởi "đẹp" tôi có nghĩa là một cái gì đó sẽ làm việc trên các trình duyệt, không quá tải tài nguyên của trình duyệt (vì nó sẽ phải tính toán lại thường xuyên), và là thanh lịch/dễ sử dụng (tức là nó sẽ được tốt đẹp để viết một cái gì đó như new FloatingFooter("floatingDiv")).

Tôi sẽ đoán không có giải pháp siêu dễ dàng nào có mọi thứ ở trên, nhưng điều tôi có thể xây dựng sẽ rất tuyệt vời.

Cuối cùng, chỉ là một câu hỏi tổng quát hơn. Tôi biết vấn đề này là một nỗi đau lớn để giải quyết, vì vậy các lựa chọn thay thế giao diện người dùng khác thay vì có nội dung chân trang ở cuối mỗi trang là gì? Trên trang web cụ thể của tôi, tôi sử dụng nó để hiển thị quá trình chuyển đổi giữa các bước. Có cách nào khác tôi có thể làm điều này?

Nguồn

2008-09-28 Bialecki

Nếu đã cảm thấy khôi hài, tôi muốn đề nghị sử dụng một khung. Nhưng tôi không, vì vậy tôi sẽ không. – skaffman

Tại sao chỉ có thẻ Javascript? Trông giống như một câu hỏi CSS cho tôi. –

Tôi tự hỏi có bao nhiêu người vẫn sử dụng IE6? –

Điều này có thể phù hợp với bạn. Nó hoạt động trên IE6 và Firefox 2.0.0.17 cho tôi. Cho nó một shot. Tôi đã làm cho chiều cao của bàn chân rất cao, chỉ để có hiệu lực. Bạn rõ ràng sẽ thay đổi nó thành những gì bạn cần. Tôi mong công việc này phù hợp với bạn.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>Liquid Footer</title> 
    <style type="text/css"> 
    .footer { 
background-color: #cdcdcd; 
height: 180px; 
text-align: center; 
font-size:10px; 
color:#CC0000; 
font-family:Verdana; 
padding-top: 10px; 
width: 100%; 
position:fixed; 
left: 0px; 
bottom: 0px; 
} 
    </style> 
    <!--[if lte IE 6]> 
    <style type="text/css"> 
    body {height:100%; overflow-y:auto;} 
    html {overflow-x:auto; overflow-y:hidden;} 
    * html .footer {position:absolute;} 
    </style> 
    <![endif]--> 
</head> 

<body> 
    This is to expand the content on the page<br> 
    This is to expand the content on the page<br> 
    This is to expand the content on the page<br> 
    This is to expand the content on the page<br> 
    This is to expand the content on the page<br> 
    This is to expand the content on the page<br> 
    This is to expand the content on the page<br> 
    This is to expand the content on the page<br> 
    This is to expand the content on the page<br> 
    This is to expand the content on the page<br> 
    This is to expand the content on the page<br> 
    This is to expand the content on the page<br> 
    This is to expand the content on the page<br> 
    This is to expand the content on the page<br> 
    This is to expand the content on the page<br> 
    This is to expand the content on the page<br> 
    This is to expand the content on the page<br> 
    This is to expand the content on the page<br> 
    This is to expand the content on the page<br> 
    This is to expand the content on the page<br> 
    This is to expand the content on the page<br> 
    This is to expand the content on the page<br> 
    This is to expand the content on the page<br> 
    This is to expand the content on the page<br> 
    This is to expand the content on the page<br> 
    This is to expand the content on the page<br> 
    This is to expand the content on the page<br> 
    This is to expand the content on the page<br> 
    This is to expand the content on the page<br> 
    This is to expand the content on the page<br> 
    This is to expand the content on the page<br> 
    This is to expand the content on the page<br> 
    This is to expand the content on the page<br> 
    This is to expand the content on the page<br> 
    This is to expand the content on the page<br> 
    This is to expand the content on the page<br> 
    This is to expand the content on the page<br> 
    This is to expand the content on the page<br> 
    This is to expand the content on the page<br> 
    This is to expand the content on the page<br> 
    This is to expand the content on the page<br> 
    This is to expand the content on the page<br> 
    This is to expand the content on the page<br> 
    This is to expand the content on the page<br> 
    This is to expand the content on the page<br> 
    This is to expand the content on the page<br> 
    This is to expand the content on the page<br> 
    This is to expand the content on the page<br> 
    This is to expand the content on the page<br> 
    This is to expand the content on the page<br> 
    This is to expand the content on the page<br> 
    This is to expand the content on the page<br> 
    This is to expand the content on the page<br> 
    This is to expand the content on the page<br> 
    This is to expand the content on the page<br> 
    This is to expand the content on the page<br> 
    This is to expand the content on the page<br> 
    This is to expand the content on the page<br> 
    This is to expand the content on the page<br> 
    This is to expand the content on the page<br> 
    <div class="footer">-- This is your liquid footer --</div> 
</body> 
</html>

Nguồn

2008-09-29 01:07:09 Taptronic

tôi sử dụng một biến thể không có nhận xét có điều kiện vì tôi thường thích đặt css của tôi vào một tệp riêng biệt. xem câu trả lời của tôi dưới đây. –

tôi luôn quên vị trí: cố định; YEAH! – jlarson

Tôi đã thực hiện việc này bằng cách sử dụng biểu thức CSS trong quá khứ.

Hãy thử một cái gì đó như thế này:

.footer { 
    position: absolute; 
    top: expression((document.body.clientHeight - myFooterheight) + "px"); 
}

read more here
and here

Nguồn

2008-09-28 20:37:44 Mattias

Tôi nghĩ "biểu thức" chỉ được hỗ trợ trong IE ... – qbeuek

Vì vậy, sử dụng biểu thức() cho IE6 và vị trí: cố định cho mọi người khác bằng cách sử dụng các chú thích có điều kiện. – Eevee

vâng, nó có vẻ giống như một cách hoàn toàn hợp lệ để giải quyết một vấn đề * IE * duy nhất. – nickf

-1

Nếu chân đã cố định chiều cao và bạn biết điều đó và có thể mã hóa cứng nó trong CSS, bạn có thể làm điều đó như thế này:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
    <head> 
     <style> 
     .content 
     { 
      position : absolute; 
      top : 0; 
      left : 0; 
      right : 0; 
      bottom : 50px; /* that's the height of the footer */ 
      overflow : auto; 
      background-color : blue; 
     } 
     .footer 
     { 
      position : absolute; 
      left : 0; 
      right : 0; 
      bottom : 0px; /* that's the height of the footer */ 
    height : 50px; 
      overflow : hidden; 
      background-color : green; 
     } 
     </style> 
    </head> 
    <body> 
     <div class="content"> 
      everything from the page goes here 
      everything from the page goes here 
      everything from the page goes here 
      everything from the page goes here 
      everything from the page goes here 
      everything from the page goes here 
      everything from the page goes here 
      everything from the page goes here 
      everything from the page goes here 
      everything from the page goes here 
      everything from the page goes here 
      everything from the page goes here 
      everything from the page goes here 
      everything from the page goes here 
      everything from the page goes here 
     </div> 
     <div class="footer"> 
      the footer 
     </div> 
    </body> 
</html>

Nguồn

2008-09-28 20:52:11 qbeuek

Nếu bạn đặt height để 100% và overflow: auto đến <html/> và <body/> thẻ, bất cứ điều gì với vị trí tuyệt đối sẽ trở nên cố định. Nó cơ bản nhất cho là khá sôi nổi với thanh cuộn được đặt kỳ lạ nhưng có thể được tinh chỉnh cho kết quả phong nha. dụ

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html> 
    <head> 
     <style> 
      html, body 
      { 
       height: 100%; 
       overflow: auto; 
      } 

      .fixed 
      { 
       position: absolute; 
       bottom: 0px; 
       height: 40px; 
       background: blue; 
       width: 100%; 
      } 
     </style> 
    </head> 
    <body> 
     <div class="fixed"></div> 
     overflow....<br /> 
     overflow....<br /> 
     overflow....<br /> 
     overflow....<br /> 
     overflow....<br /> 
     overflow....<br /> 
     overflow....<br /> 
     overflow....<br /> 
     overflow....<br /><!-- ... --> 
    </body> 
</html>

Nguồn

2008-09-29 21:53:10

nếu bạn muốn không sử dụng những ý kiến có điều kiện, do đó bạn có thể đặt các css trong một file riêng biệt, sử dụng !important. Một cái gì đó như thế này:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
    <head> 
     <style> 
      html { 
       overflow-x: auto; 
       overflow-y: scroll !important; 
       overflow-y: hidden; /* ie6 value b/c !important ignored */ 
      } 

      body { 
       padding:0; 
       margin:0; 
       height: 100%; 
       overflow-y: hidden !important; 
       overflow-y: scroll; /* ie6 value b/c !important ignored */ 
      } 

      #bottom { 
       background-color:#ddd; 
       position: fixed !important; 
       position: absolute; /* ie6 value b/c !important ignored */ 
       width: 100%; 
       bottom: 0px; 
       z-index: 5; 
       height:100px; 
      } 
      #content { 
       font-size: 50px; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="bottom"> 
      keep this text in the viewport at all times 
     </div> 
     <div id="content"> 
      Let's create enough content to force scroll bar to appear. 
      Then we can ensure this works when content overflows. 
      One quick way to do this is to give this text a large font 
      and throw on some extra line breaks. 
      <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
      <br/><br/><br/><br/><br/><br/><br/><br/>  
     </div> 
    </body> 
</html>

Nguồn

2009-05-24 21:51:37

$(function(){ 
    positionFooter(); 
    function positionFooter(){ 
     if($(document).height() < $(window).height()){//Without the body height conditional the footer will always stick to the bottom of the window, regardless of the body height, $(document).height() - could be main container/wrapper like $("#main").height() it depend on your code 
      $("#footer").css({position: "absolute",top:($(window).scrollTop()+$(window).height()-$("#footer").height())+"px"}) 
     } 
    } 

    $(window).scroll(positionFooter); 
    $(window).resize(positionFooter); 
});

Nguồn

2011-10-31 07:10:20 Greg

Làm cách nào để có chân trang nổi để dính vào đáy của khung nhìn trong IE 6?

Trả lời

Các vấn đề liên quan