Wie bekomme ich eine schwebende Fußzeile, um im IE 6 am unteren Rand des Ansichtsfensters zu bleiben?

Ich weiß, das wäre einfach mit Position: behoben, aber leider stecke ich mit Unterstützung IE 6. Wie kann ich das tun? Ich würde lieber CSS verwenden, um sauber zu sein, aber wenn ich Javascript verwenden muss, ist das nicht das Ende der Welt. In meiner aktuellen Implementierung habe ich einen "floating footer", der über dem Hauptinhaltsbereich schwebt und mit Javascript positioniert ist. Die Implementierung, die ich gerade habe, ist nicht gerade elegant mit dem Javascript, also meine Fragen sind:Wie bekomme ich eine schwebende Fußzeile, um im IE 6 am unteren Rand des Ansichtsfensters zu bleiben?

Gibt es eine Möglichkeit, dies ohne Javascript zu tun?
Wenn ich Javascript verwenden muss, gibt es irgendwelche "netten" Lösungen für dieses Problem mit dem Floating Footer? Mit "nett" meine ich etwas, das über Browser funktioniert, die Ressourcen des Browsers nicht überlastet (da es oft neu berechnet werden muss) und elegant/einfach zu benutzen ist (d. H. Es wäre schön, etwas wie new FloatingFooter("floatingDiv") zu schreiben).

Ich werde raten, dass es keine super einfache Lösung gibt, die alles oben hat, aber etwas, von dem ich bauen kann, wäre großartig.

Schließlich nur eine allgemeinere Frage. Ich weiß, dass es ein großes Problem ist, dieses Problem zu lösen. Was sind also andere UI-Alternativen, als Fußzeileninhalte am Ende jeder Seite zu haben? Auf meiner speziellen Website verwende ich es, um Übergänge zwischen Schritten zu zeigen. Gibt es andere Möglichkeiten, dies zu tun?

Quelle

2008-09-28 Bialecki

Wenn spürten facetious, ich würde vorschlagen, ein Frameset verwenden. Aber ich bin es nicht, also werde ich nicht. – skaffman

Warum nur ein Javascript-Tag? Sieht für mich wie eine CSS-Frage aus. –

Ich frage mich, wie viele Leute immer noch IE6 verwenden? –

Dies kann für Sie arbeiten. Es funktioniert auf IE6 und Firefox 2.0.0.17 für mich. Versuch es einmal. Ich habe die Fußhöhe sehr groß gemacht, nur um Wirkung zu zeigen. Sie würden es natürlich zu dem ändern, was Sie brauchen. Ich hoffe, das funktioniert für dich.

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

Quelle

2008-09-29 01:07:09 Taptronic

ich benutze eine Variante ohne die bedingten Kommentare, da ich normalerweise meine CSS in eine separate Datei lege. Siehe meine Antwort unten. –

ich vergesse immer die position: fixed; JA! – jlarson

Ich habe dies mit CSS-Ausdrücke in der Vergangenheit getan.

versuchen, etwas wie folgt aus:

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

read more here
and here

Quelle

2008-09-28 20:37:44 Mattias

Ich denke "Ausdruck" wird nur in IE unterstützt ... – qbeuek

So verwenden Sie expression() für IE6 und Position: für alle anderen mit bedingten Kommentaren behoben. – Eevee

Ja, es klingt wie eine vollkommen gültige Möglichkeit, ein * IE only * -Problem zu lösen. – nickf

-1

Wenn die Fußzeile hat Höhe fixiert und Sie wissen es und kann hart Code in CSS, können Sie es wie folgt tun:

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

Quelle

2008-09-28 20:52:11 qbeuek

Wenn Sie die height zu 100% und overflow: auto den <html/> und <body/> Tags setzen, etwas mit der absoluten Position wird fixiert werden. Es ist das grundlegendste für ist ziemlich funky mit seltsam platzierten Bildlaufleisten, aber kann zu guten Ergebnissen zwicken. Beispiel

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

Quelle

2008-09-29 21:53:10

, wenn Sie die bedingten Kommentare wollen nicht verwenden, so dass Sie die CSS in einer separaten Datei setzen, verwenden !important. Etwas wie folgt aus:

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

Quelle

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

Quelle

2011-10-31 07:10:20 Greg

Wie bekomme ich eine schwebende Fußzeile, um im IE 6 am unteren Rand des Ansichtsfensters zu bleiben?

Antwort

Verwandte Themen