Bonjour,
Voilà mon problème : j'ai utilisé la méthode suivante pour avoir un fond image à 100% en vertical :
Je décris rapidement : un fond en repeat dans le CSS du <html>, un fond centré en repeat-y pour le contenu, l'ensemble simulant un fluid/fixed/fuild avec fond reproduit en vertical, tout le contenu est dans le fixed.
Le résultat marche très bien sous Internet Explorer, Firefox et Opera. Notons qu'il faut ce padding 1px à FF et Op. pour que le fond de l'image centrale soit collé au début de la page ce qui paraît un peu étrange, mais passons. D'ailleurs FF se contente d'un 0.01em mais pas Opera, cependant dans la mesure où aucun des deux ne me force une scrollbar ça me va, c'est juste que je ne comprends pas pourquoi avec un padding 0 en vertical ils mettent tous les deux une marge avant d'afficher l'image de fond, mais une fois encore passons ce n'est pas le but de ce post.
Bref, j'en viens à mon problème : lorsque la page s'étire verticalement pour cause de contenu supplémentaire voilà ce qui se passe :
* DHTML : les 3 navigateurs étirent bien le background du div central en vertical, tout va bien (display: none, basculé en "block") ce qui n'est pas une surprise puisque le contenu est déjà dans le DOM au chargement
* AJAX : seul IE étire correctement le fond, FF et Opera restent sur le 100% du chargement initial et il n'y a pas de fond sur la hauteur correspondant à ce qui a été ajouté en retour de XHR, ce qui scroll sous la hauteur d'origine.
Ma question est assez simple : y a-t-il un moyen CSS pour faire en sorte que FF et Opera affichent du 100% height même après modification par une requête XHR ? J'imagine qu'il serait possible de bidouiller une fonction JS pour forcer les choses, mais j'aimerais autant une solution 100% CSS s'il en existe une.
Voilà, j'ai cherché dans cette partie du forum et dans la partie AJAX sans voir de piste sur le sujet, vu que pour l'instant je préfère m'orienter vers du pur CSS j'ai posté ici, n'hésitez pas à me déplacer si vous pensez que j'ai mal fait mon choix.
Merci à tous ceux qui auraient une piste, désolé de ne pas avoir posté de lien de démo, c'est un projet encore privé à ce stade, il faut être authentifié pour tester, bref tout un travail pour mettre en plus un AJAX faux en test.
Brice
Voilà mon problème : j'ai utilisé la méthode suivante pour avoir un fond image à 100% en vertical :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Test layout</title>
<style type="text/css">
html { background: url(images/common/background.jpg) repeat; height: 100%; margin: 0; padding: 0 }
body { height: 100%; margin: 0; padding: 0 }
div#main { background: url(images/common/parchment.jpg) repeat-y center 0; width: 928px; margin: auto; height: auto !important; height: 100%; min-height: 100% }
</style>
</head>
<body>
<div id="main">
<div style="padding: 1px 45px">
<div>
<p>Corps</p>
</div>
</div>
</div>
</body>
</html>Je décris rapidement : un fond en repeat dans le CSS du <html>, un fond centré en repeat-y pour le contenu, l'ensemble simulant un fluid/fixed/fuild avec fond reproduit en vertical, tout le contenu est dans le fixed.
Le résultat marche très bien sous Internet Explorer, Firefox et Opera. Notons qu'il faut ce padding 1px à FF et Op. pour que le fond de l'image centrale soit collé au début de la page ce qui paraît un peu étrange, mais passons. D'ailleurs FF se contente d'un 0.01em mais pas Opera, cependant dans la mesure où aucun des deux ne me force une scrollbar ça me va, c'est juste que je ne comprends pas pourquoi avec un padding 0 en vertical ils mettent tous les deux une marge avant d'afficher l'image de fond, mais une fois encore passons ce n'est pas le but de ce post.
Bref, j'en viens à mon problème : lorsque la page s'étire verticalement pour cause de contenu supplémentaire voilà ce qui se passe :
* DHTML : les 3 navigateurs étirent bien le background du div central en vertical, tout va bien (display: none, basculé en "block") ce qui n'est pas une surprise puisque le contenu est déjà dans le DOM au chargement
* AJAX : seul IE étire correctement le fond, FF et Opera restent sur le 100% du chargement initial et il n'y a pas de fond sur la hauteur correspondant à ce qui a été ajouté en retour de XHR, ce qui scroll sous la hauteur d'origine.
Ma question est assez simple : y a-t-il un moyen CSS pour faire en sorte que FF et Opera affichent du 100% height même après modification par une requête XHR ? J'imagine qu'il serait possible de bidouiller une fonction JS pour forcer les choses, mais j'aimerais autant une solution 100% CSS s'il en existe une.
Voilà, j'ai cherché dans cette partie du forum et dans la partie AJAX sans voir de piste sur le sujet, vu que pour l'instant je préfère m'orienter vers du pur CSS j'ai posté ici, n'hésitez pas à me déplacer si vous pensez que j'ai mal fait mon choix.
Merci à tous ceux qui auraient une piste, désolé de ne pas avoir posté de lien de démo, c'est un projet encore privé à ce stade, il faut être authentifié pour tester, bref tout un travail pour mettre en plus un AJAX faux en test.
Brice