28172 sujets

CSS et mise en forme, CSS3

Footer en bas de page

Bonjour,

Lorsque je mets la propriété "position absolute; bottom : 30px" au footer de ma page, celui-ci est effectivement positionné à 30 pixels du bas de l'écran. Mais ce que je veux c'est de placer ce footer à 30 pixels du bas de TOUTE la page, et non de l'écran. C'est à dire qu'il n'apparait qu'après avoir défilé entièrement vers le bas. Comment faire ?
Merci d'avance
Salut,

erulawliet a écrit :
Mais ce que je veux c'est de placer ce footer à 30 pixels du bas de TOUTE la page, et non de l'écran. C'est à dire qu'il n'apparait qu'après avoir défilé entièrement vers le bas. Comment faire ?
Il faudrait commencer par (re)lire le Guide de survie du positionnement CSS. Smiley cligne

En l'occurrence un élément en position:absolute; se positionne par rapport à son premier ancêtre positionné et si celui-ci n'existe pas il le fait par rapport au viewport (zone de visualisation du navigateur). En gros il suffit donc d'affecter, par exemple, un position:relative; au bloc conteneur du footer pour que ça fonctionne.

Question subsidiaire : pourquoi utiliser le positionnement absolu ? S'il ne s'agit que d'avoir un espace de 30px en dessous du footer un margin-bottom fera très bien l'affaire...
Heyoan a écrit :
si celui-ci n'existe pas il le fait par rapport au viewport

Salut,

Ca dépend des navigateurs. Sur IE6 et 7, il se fait effectivement par rapport au viewport, cependant sur Firefox(3), il se fait par rapport à l'élément html.
Hello,

Agylus a écrit :
Ca dépend des navigateurs. Sur IE6 et 7, il se fait effectivement par rapport au viewport, cependant sur Firefox(3), il se fait par rapport à l'élément html.
Heu... je ne saisis pas bien la nuance. Smiley murf
Le viewport concerne toute la zone d'affichage disponible, alors que l'élément html fait partie de cette zone.

En effet, on peut attribuer des styles à l'élément html, et on peut même lui mettre des marges (l'intérêt est limité, mais ça reste possible).

Donc si on prend un code similaire à :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Titre</title>
<style type="text/css">
  html {
    margin : 50px;
  }
  
  #absolu {
    position : absolute;
    top : 0;
    left : 0;
    background : blue;
    width : 150px;
    height : 500px;
  }
</style>
</head>
<body>

<div id="absolu"></div>

</body>
</html>

Notre div #absolu sera positionné à 50px des bords haut et gauche de la fenêtre de visualisation sur Firefox, mais à 0px sur IE.


Edit : En poussant l'expérience un peu plus loin, il semblerait que mettre un position:relative sur le html n'ait aucun effet sur IE, cependant un position:relative sur le body le fait se positionner par rapport au body.
Modifié par Agylus (08 Apr 2009 - 11:29)
Ah d'accord ! Cette fois-ci je saisis bien la nuance. Smiley smile


Edit de dernière minute : après une enquête approfondie ( Smiley lol ) réalisée par Agylus et moi-même et une relecture assidue des spécifications, le comportement dans Firefox ne correspond pas à celui attendu et diffère d'ailleurs de tous les autres navigateurs respectueux des standards : le positionnement absolu en l'absence d'un ancêtre positionné devrait être fait par rapport au viewport et pas par rapport à l'élément HTML.

Je cite :
a écrit :
In the absolute positioning model, a box is explicitly offset with respect to its containing block

a écrit :
The containing block for a positioned box is established by the nearest positioned ancestor (or, if none exists, the initial containing block, as in our example)

a écrit :
The containing block in which the root element lives is a rectangle called the initial containing block. For continuous media, it has the dimensions of the viewport

Modifié par Heyoan (02 Jun 2009 - 14:48)
Hello,

sacapuss a écrit :
si tu consideres que ton probleme est resolu, peux-tu indiquer "resolu", stp (cette nuit, je me prends pour un moderateur) ?
Mais c'est ma foi vrai ! Même si avec 32 petits messages au compteur c'est peut-être un p'tit peu tôt non ? Smiley langue

D'ailleurs l'ami(e) erulawliet n'a toujours pas répondu donc c'est un peu prématuré de demander le passage du sujet en [Résolu] ! (<-- j'en profite pour placer le lien car, d'expérience, je sais que certains membres n'ont pas pris le temps de lire les règles du forum et donc cela peut toujours servir Smiley lol !)


Edit: @erulawliet > il semble effectivement que tu as oublié de "clôturer" ton dernier sujet. Smiley smile
Modifié par Heyoan (09 Apr 2009 - 05:18)
Sujet clos
Aller à