Comment puis-je obtenir un pied flottant pour coller au bas de la fenêtre dans IE 6?

Je sais que ce serait facile avec position:fixed, mais unfortanately je suis coincé avec le soutien d'IE 6. Comment puis-je faire cela? Je préfère utiliser les CSS pour être propre, mais si je dois utiliser du Javascript, ce n'est pas la fin du monde. Dans mon application j'ai un flottant "pied de page" qui flotte au-dessus de la zone de contenu principal et est positionné avec Javascript. La mise en œuvre que j'ai droit n'est pas particulièrement élégant, même avec le Javascript, donc mes questions sont:

Est-il un moyen de le faire sans Javascript?
Si je dois utiliser du Javascript, il y a aucune "belle" des solutions à ce flottant pied de problème? Par le "gentil", je veux dire quelque chose qui va travailler sur tous les navigateurs, ne surcharge pas le navigateur de ressources (car il faudra recalculer souvent), et est élégant, facile à utiliser (c'est à dire qu'il serait agréable d'écrire quelque chose comme new FloatingFooter("floatingDiv")).

Je vais deviner n'est pas une super solution de facilité qui a tout au-dessus, mais quelque chose que je peux construire de.

Enfin, juste une question plus générale. Je sais que ce problème est un grand problème à résoudre, alors ce sont d'autres de l'INTERFACE utilisateur des solutions de rechange plutôt que d'avoir le pied de page de contenu en bas de chaque page? Sur mon site, je l'utilise pour montrer les transitions entre les étapes. Il existe d'autres moyens, je pourrais faire cela?

source d'informationauteur Bialecki

Cela peut fonctionner pour vous. Il fonctionne sous IE6 et Firefox 2.0.0.17 pour moi. Donner un coup de feu. J'ai fait le pied de page de la hauteur de la très haute, juste pour l'effet. Vous serait évidemment changer à ce que vous avez besoin. J'espère que cela fonctionne pour vous.

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

si vous ne souhaitez pas utiliser les commentaires conditionnels, de sorte que vous pouvez mettre le css dans un fichier séparé, utilisez !important. Quelque chose comme ceci:

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

2

Je l'ai fait à l'aide d'expressions CSS dans le Passé.

Essayer quelque chose comme cela:
```
.footer {
position: absolute;
top: expression((document.body.clientHeight - myFooterheight) + "px");
}
```
lire la suite ici

et ici

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

Si vous mettez le height à 100% et overflow: auto à la <html/> et <body/> balises, quoi que ce soit avec la position absolue seront fixés. Le plus basique est assez funky avec bizarrement placé barres de défilement, mais peut être régler pour avoir des résultats décents.
exemple

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

-1

Si le pied de page a hauteur fixe et vous le savez et pouvez coder en dur dans le CSS, vous pouvez le faire comme ceci:

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

Vous devez vous connecter pour publier un commentaire.