如何在IE 6中獲得浮動頁腳以粘貼到視口底部？

我知道這將很容易與位置：固定，但不幸的是我堅持支持IE 6。我該怎麼做？我寧願使用CSS來保持清潔，但如果我必須使用JavaScript，那不是世界的盡頭。在我目前的實現中，我有一個漂浮在主要內容區域之上的「浮動頁腳」，並使用Javascript定位。我現在的實現並不特別優雅，即使使用Javascript，所以我的問題是：如何在IE 6中獲得浮動頁腳以粘貼到視口底部？

有沒有辦法做到這一點沒有JavaScript？
如果必須使用Javascript，是否有任何「漂亮」的解決方案來解決這個浮動頁腳問題？「好」是指可以跨瀏覽器工作的一些東西，不會使瀏覽器的資源過載（因爲它需要經常重新計算），並且使用起來很方便（也就是寫一些像new FloatingFooter("floatingDiv")這樣的東西會很好）。

我會猜測沒有超級簡單的解決方案，但上面的所有東西，但我可以建立的將是偉大的。

最後，只是一個更普遍的問題。我知道這個問題是一個需要解決的重大難題，那麼其他UI替代方案是什麼，而不是在每個頁面的底部都有頁腳內容？在我的特定網站上，我用它來顯示各個步驟之間的轉換。有其他方法可以做到這一點嗎？

來源

2008-09-28 Bialecki

如果都感到滑稽，我建議使用一個框架。但我不是，所以我不會。 – skaffman 2008-09-28 20:31:15

爲什麼只有Javascript標籤？看起來像一個CSS問題給我。 – 2008-09-28 20:40:04

我想知道有多少人仍在使用IE6？ – 2009-05-24 21:58:38

這可能適合你。它適用於IE6和Firefox 2.0.0.17。試一試。我將頁腳的高度做得非常高，只是爲了提高效果。你顯然會改變它到你需要的。我希望這對你有用。

<!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>

來源

2008-09-29 01:07:09 Taptronic

我已經在過去使用CSS表達式完成了這項工作。

嘗試這樣：

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

read more here
and here

來源

2008-09-28 20:37:44 Mattias

-1

如果頁腳已固定的高度，你知道的，可以在CSS硬編碼，你可以做這樣的：

<!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>

來源

2008-09-28 20:52:11 qbeuek

如果你把height到100%和overflow: auto到<html/>和<body/>標籤，與絕對位置任何事情都會變成固定的。它最基本的是非常奇怪的滾動條，但可以調整到體面的結果。例如

<!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>

來源

2008-09-29 21:53:10

如果你想不使用條件註釋，這樣就可以把CSS在一個單獨的文件，使用!important。事情是這樣的：

<!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>

來源

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); 
});

來源

2011-10-31 07:10:20 Greg

如何在IE 6中獲得浮動頁腳以粘貼到視口底部？

回答

相關問題