[Résolu] Body ne s'adapte pas

bonjour,
je cherche un moyen pour faire en sorte que le body prend en compte les autres bloques qui sont l'intérieur, j'ai essayé min-height:100% mais il s’effondre complètement,
voilà mon soucis : http://jsfiddle.net/pmS29/2/
Modifié par smith (23 Dec 2013 - 19:52)

Bonsoir,

Dans ton exemple, tu imposes à .block une hauteur de 120% de son parent, c'est à dire 120% par rapport à body.
En clair, tu lui demandes explicitement de déborder de body.

Que souhaites-tu faire exactement ?

il faut pour cela redimensionner l'autre Div à 100% et non 120%

Bonsoir,

une autre remarque : le width: 100%; que tu appliques sur les éléments html et body ne sert à rien. De plus, c'est souvent une mauvaise pratique.

merci pour vos réponses,
même avec une taille en px ça change rien,
je cherche à réaliser une page qui s'adapte au format de l'écran, et que le pied de page reste toujours coller sur l'écran si la taille de la page est inférieur à l'écran, même si on applique un fort dé-zoom

j'ai finalement trouvé une solution pour que la page ne s'effondre pas

height:auto;
min-height:100%;

mais le pied de page ne reste pas collé au bord si je dé-zoom, mais c'est juste un détail.

@jQzz, width: 100% c’est le mal !
merci pour l'info, je n'étais pas au courant
Modifié par smith (23 Dec 2013 - 23:23)

Encore ce lien qui ressort...
http://www.cssstickyfooter.com/fr/

c'est impeccable !

Zelalsan a écrit :
Encore ce lien qui ressort...
http://www.cssstickyfooter.com/fr/

Je trouve ça un peu trop tordu comme technique

Je préfère personnellement profiter des valeurs tabulaires de la propriété display : http://goetter.fr/lab/divers/table-footer/

@Raphael> En effet c'est plus intéressant. Faut dire que le lien date un peu.

Raphael a écrit :


Je trouve ça un peu trop tordu comme technique

Je préfère personnellement profiter des valeurs tabulaires de la propriété display : http://goetter.fr/lab/divers/table-footer/

C'est pas tordu, c'est une ancienne technique qui supporte IE 6 et 7 et qui est parfaitement solide (testée en production sur plusieurs layouts relativement complexes). Ta technique à base de display table n'est compatible qu'à partir d'IE 8.

jb_gfx a écrit :

C'est pas tordu, c'est une ancienne technique qui supporte IE 6 et 7 et qui est parfaitement solide (testée en production sur plusieurs layouts relativement complexes). Ta technique à base de display table n'est compatible qu'à partir d'IE 8.

Par "tordu" je n'ai pas voulu dire "qui ne marche pas", mais "qui est alambiquée".

Cette solution me dérange pour le nombre de contraintes qu'elle embarque :

1) body {height: 100%;}
Si body a une hauteur figée à 100%, alors son contenu peut déborder s'il est très long (ou alors il faudra imposer des barres de scroll aux enfants)

2) La hauteur du pied de page doit non-seulement être connue, mais surtout répercutée à 3 endroits différents du code :
- padding-bottom: 180px;
- margin-top: -180px;
- height: 180px;
je ne suis pas très fan de ce genre de contraintes en terme de maintenance... et d'accessibilité, sachant que tout est cassé si on modifie la taille des contenus (si le footer s'agrandit en hauteur)

3) Le Opera Fix est hideux (oui bon OK Opera...)
Modifié par Raphael (26 Dec 2013 - 21:58)