Height 100%! ca existe pas ou quoi? :)

Bonjour,
J'ai biensur commencé par lire la FAQ et les articles se rapportant au height:100%, le positionement de footer en bas de page,... j'ai été sur pompage.net et les autres mais je constate qu'il n'existe aucun moyen de bloqué la taille d'un conteneur a 100%!

Je m'adresse ici par exemple à Raphael et Dew, qui se lance dans la création de site pro standards!
Si un client veut un site en height:100% vous faite comment?

Dans la FAQ on parle de http://forum.alsacreations.com/faq/#item25 , mais si le contenu est trop grand ca ne fonctionne pas. Sur cette même page, il y a ce lien : http://www.solardreamstudios.com/learn/css/footerstick/ ! la le problème est que le padding ajouté engendre un scroll verticale a chaque fois! Pas pratique quand le bottom renferme des infos importantes!

Voila voila, si qqun à la solution, même si je crains qu'il n'y en ai pas...

/ologram qui s'est pour la premiere fois faché avec les standards

Hello,

Height 100%, ça existe.

Par contre, il est important de préciser que le média Web (screen) n'est pas un média paginé comme le média print.
Il a ses propres règles et contraintes et il serait temps que les concepteurs web ne confondent plus les médias et lâchent prise.
Modifié par Raphael (14 Feb 2006 - 14:54)

d'accord mais la réalité c'est quoi?
c'est que j'ai une page qui tourne derrière un language genre php ou asp.. Il peut arriver que lors d'une mauvaise requete, d'une page sans article ou autres le contenu se voit réduire a une simple ligne...et donc le footer remonte inévitablement.
Avec un tableau y'aurait pas de problème; une hauteur à 100% et même si le contenu est resteint, il n'y a pas de choc visuel...

Dans webdesign, y'a aussi design... un layout qui change de taille à chaque changement de page, pour moi, n'aide pas l'expérience utilisateur!

ologram a écrit :

Avec un tableau y'aurait pas de problème; une hauteur à 100% et même si le contenu est resteint, il n'y a pas de choc visuel...

Salut
Ah bon ? Tu as essayé pour le tableau avec hauteur à 100 %?

bah vi...
c'est un peu ce qu'on retrouve sur tout les sites fait en tableau!

Au lieu de donner une hauteur de 100%, pourquoi ne pas mettre simplement une hauteur minimum à ton contenu ?

ologram a écrit :
Dans webdesign, y'a aussi design... un layout qui change de taille à chaque changement de page, pour moi, n'aide pas l'expérience utilisateur!

Disons un instant que tu puisse mettre une hauteur de 100%, et que ta signature se trouve toujours en bas de l'écran. Qu'arrrivera-t-il si l'utilisateur agrandi le texte avec son navigateur, ou si ton contenu est plus grand que d'habitude ? Ce qui va se passer, c'est que le contenu va pousser ta signature en bas de la zone visible de l'écran, donc d'une façon ou d'une autre, tu ne peux pas imposer une taille fixe à ton design. Tout dépend du contenu et de la configuration utilisateur, tant au niveau matériel que logiciel. Il est donc important de lâcher prise.

Par contre, je suis d'accord que lorsqu'il y a peu de contenu, ce n'est pas visuellement très agréable de voir le design se réduire. C'est pourquoi, pour ma part, j'utilise une hauteur minimum pour le corps du contenu.
Modifié par Tony Monast (14 Feb 2006 - 16:51)

Je n'ai jamais vu ça pour le tableau à height 100%, et je trouve ça étonnant. Tu as un exemple ou du code?
Modifié par Alan (14 Feb 2006 - 16:56)

Perso je l'utilisai courament (quand le w3c était encore inconu pour moi) pour centrer mon contenu.
Je fesai un tableau de 100% en width et height et du coup à l'intérieur de celui ci je pouvais centrer verticalement et horizontalement mes éléments.
Mais bon maintenant je vois que css le fait mieux ^^

biensur:
http://www.easy-phone.be/
le tableau prend tout l'espace de la page même si y'a peu de contenu!
Attention je le répète je ne vois que par les standards mais la faut admettre que c'est pas encore au point...

Salut,

C'est difficile à dire d'après ton lien : mis à part la hauteur définie à 100%, il y a des tableaux imbriqués et d'autres hauteurs. Chez moi une barre de scroll verticale apparaît.

Sinon, d'après mes essais, le height 100% sur un tableau ne marche qu'en mode quirks, tout comme pour une div d'ailleurs.
Modifié par Alan (14 Feb 2006 - 17:08)

une imbrication de tableau p-e mais ca marche!

Avec des div et selon une page du style:

<div class="global">
   <div class="banniere"></div>
   <div class="contenu"></div>
   <div class="footer"></div>
</div>

je te met au défi de me mettre le footer qui colle le bas de ta fenêtre et ce, selon le contenu ( cad même lorsqu'il n'y a qu'une misérable phrase)

Salut,
Comme je t'ai dit le height 100% sur un tableau ne marche qu'en quirks mode (en enlevant le DOCTYPE par exemple). Ce qui marcherait aussi avec une DIV. Tu n'as qu'à faire des essais.

POur ton défi, plûtot facile : il suffit d'utiliser la position fixed !
Modifié par Alan (14 Feb 2006 - 17:29)

C'est pourtant faisable et une bonne base pour y arriver c'est cet article de chez pompage.net

Mais ca reste gadget (même si je l'utilise moi-même :x).

l'article de pompage je l'ai lu toute l'apres midi... rien n'est complet , mis a part p-e la solution avec le code javascript que je me refuse a employer... ca me ferait mal de devoir mettre 30 lignes de JS pour positionner un élément!

Pour ce qui est du quirks mode je ne comprend pas bien...
tu voudrais dire que cette page alors n'a pas de doctype? http://www.paramoteur.info/

Pourtant en me basant sur l'article de pompage j'y suis arrivé, comme tu peux le voir sur mon site.

Firefox 1.5 m'a gâch' une partie de l'effet que je n'ai toujours pas corrigé mais la hauteur de page à 100% fonctionne.

ologram a écrit :
biensur:
http://www.easy-phone.be/
le tableau prend tout l'espace de la page même si y'a peu de contenu!
Attention je le répète je ne vois que par les standards mais la faut admettre que c'est pas encore au point...

Le tableau prend tout l'espace vertical de la page ? Ah bon ?

- Konqueror : le tableau prend la taille du contenu, pas plus ;
- Opera : le tableau prend la taille du contenu, pas plus ;
- Firefox 1.5 : le tableau prend 102% de la taille de la page. Même pour un contenu de quelques mots, une barre de défilement apparaît.

Bon, c'est pas encore ça.

ologram a écrit :

Pour ce qui est du quirks mode je ne comprend pas bien...
tu voudrais dire que cette page alors n'a pas de doctype? http://www.paramoteur.info/

Ce site (ce document) n'a pas un doctype valide, et le navigateur passe en mode de compatibilité (Quirk mode).
Modifié par Tony Monast (14 Feb 2006 - 17:53)

Merci à tous pour vos remarques, j'étudirai la chose demain au boulot et reviendrai ici pour donner un suivi

edit: Tony Monast> pour la hauteur minimal, min-height n'est pas reconnu par IE si je ne me trompe!
Modifié par ologram (14 Feb 2006 - 21:31)

me revoila,
Je viens de faire des tests en me basant notament sur le site de tyx mais il y a toujours une erreur dans un cas selon les propriétés que je change! Je vous joins ici mon html et ma css, le problème est lorsque le texte est trop important le div footer ne suit pas sous firefox!

voila voila, si quelqu'un arrive a me fonctionner çà lorsque le contenu est petit ou grand, et ce sur IE et firefox, je lui serait très reconnaissant

le zip: http://www.ologram.be/trash/divbottom.zip

merci

ologram a écrit :
Tony Monast> pour la hauteur minimal, min-height n'est pas reconnu par IE si je ne me trompe!

J'avais mis un lien dans l'un de mes messages pointant vers un article à ce sujet : min-height pour IE

Pour ma part, j'utilise cette solution :

#bloc {
height: 5em;
background: yellow;
}
html>body #bloc {
height: auto;
min-height: 5em;
} 

La première déclaration est pour IE, qui traite height comme un min-height. La deuxième est pour les navigateurs aux normes, qui remet le height en automatique, et déclare ensuite un min-height. IE comprend et est content, Firefox et les autres aussi.
Modifié par Tony Monast (15 Feb 2006 - 14:57)