Épingler l'arrière-plan de l'image au bas du document dans des documents courts et longs

J'essaie de fixer une image au bas du document pour une page HTML.Épingler l'arrière-plan de l'image au bas du document dans des documents courts et longs

Ma stratégie consiste grosso modo à définir la hauteur CSS du nœud html à 100% et à définir la position d'arrière-plan de l'image d'arrière-plan au fond.

Ceci fonctionne pour les pages dont le document est plus court que la taille de la fenêtre, mais pour les documents d'une longueur supérieure à la taille de la fenêtre, l'arrière-plan est positionné au milieu de la page.

Sans savoir si le document sera plus long que la fenêtre d'affichage ou non, comment puis-je corriger l'arrière-plan à la fin du document?

J'ai réussi à le faire fonctionner comme requis dans Firefox uniquement avec les éléments suivants:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html dir="ltr" lang="en"> 
<head profile="http://www.w3.org/2005/10/profile"> 
<style type="text/css"> 
* { 
margin:0; 
padding:0; 
} 

html { 
    height:100%; 
} 

.wrapper { 
    background: #eaeaea url(ufford-logo.jpg) scroll repeat-x bottom center; 
    min-height: 100%; 
} 

</style> 
</head> 
<body> 

    <div class="wrapper"> 

     <p style="height: 2000px;">test</p> 

    </div> 

</body> 
</html>

Le style en ligne sur l'étiquette p Simule un long document.

Source

2009-08-10 David Snabel-Caunt

Vous devriez probablement changer votre titre et baliser de nouveau votre question. Il semble que vous essayez d'épingler votre image au bas de la fenêtre et non au bas du document comme indiqué dans le titre. Afaik vous aurez besoin de JavaScript pour le faire, donc vous pourriez vouloir ajouter cette balise. –

Je suis d'accord, votre exemple semble faire exactement ce que vous dites que vous voulez. Les problèmes se produisent lorsque le document est plus petit que la taille de la fenêtre d'affichage, de sorte que vous ne savez pas exactement ce que vous essayez d'obtenir. Si vous cherchez à garantir que la page est au moins une fenêtre en hauteur, essayez de définir le corps et le html à 100% de la hauteur. – robertc

J'essaie d'épingler l'image au bas du document, pas la fenêtre d'affichage.En effet, le problème se produit lorsque le document est plus petit que la taille de la fenêtre et c'est le problème que j'essaie de résoudre. –

Cela fonctionne pour moi dans Firefox 3.5, IE8/7c, Chrome 2. ne fonctionne pas dans Opera 10b mais je pense que cela fonctionne dans la version stable (9,6).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html dir="ltr" lang="en"> 
<head profile="http://www.w3.org/2005/10/profile"> 
<style type="text/css"> 
* { 
margin:0; 
padding:0; 
} 
html, body { 
    height: 100%; 
    min-height: 100%; 
} 
.wrapper { 
    background: #eaeaea url(http://sstatic.net/so/img/so/logo.png) scroll repeat-x bottom center; 
    min-height: 100%; 
} 
</style> 
</head> 

<body> 

    <div class="wrapper"> 
    <p style="height: 2000px;">test</p> 
    </div> 

</body> 
</html>

Source

2009-08-11 14:28:23 DisgruntledGoat

Brillante, j'avais clairement manqué la bonne combinaison de hauteurs min et de hauteurs sur les éléments. Votre démo fonctionne bien, et IE6 peut facilement être pris en charge avec la hauteur sur le .wrapper –

Je pense que ce que vous essayez d'obtenir est très similaire à this layout, bien que dans votre cas, vous ne feriez que coller votre image dans l'élément de pied de page (ou l'avoir comme arrière-plan sur le pied de page). Si vous avez une mise en page plus complexe, vous pouvez peut-être adapter le code, ou vous pouvez essayer this approach using javascript.

Source

2009-08-11 13:12:56 robertc

Merci pour votre réponse –

Si vous souhaitez coller quelque chose en bas de la fenêtre visible, vous pouvez le faire en utilisant CSS. Cela fonctionnera sur render (et sur le redimensionnement de la fenêtre).

#specialBackground { 
    background-image: url(bg.png); 
    background-position: center; 
    background-repeat: no-repeat; 
    width: 100%; 
    height: 100px; 
    z-index: -1; 
    position: absolute; 
    bottom: 0; 
}

Cela placera l'image où vous le voulez - vous aurez besoin de changer l'arrière-plan image et la hauteur appropriée à votre image. L'index z place la division derrière un autre contenu, mais cela ne fait pas de mal de définir la division plus tôt dans votre document (vous pouvez le définir n'importe où et la position sera inchangée).

Pour conserver la division en bas de la fenêtre lorsque le visiteur fait défiler la page, vous devez utiliser JavaScript. Exemple ci-dessous:

window.onscroll = function() { 
document.getElementById("specialBackground").style.bottom = 
    (document.body.scrollTop * -1) + "px"; 
};

Espérons que cela aide.

EDIT: Je ne sais pas si je l'ai dit clairement - mais vous n'utilisez pas votre division "wrapper" pour cela - vous ajoutez une autre division vide, qui est placée derrière le wrapper à cause des règles CSS. Donc, vous auriez ceci sur votre page:

<div id="specialBackground">&nbsp;</div> 
<div id="wrapper"> 
...

Source

2009-08-11 13:25:09 Fenton

Épingler l'arrière-plan de l'image au bas du document dans des documents courts et longs

Répondre

Questions connexes