Height:100% -> J'ai enfin compris le truc !

Bonjour à tous,
Si vous souhaitez créer un site web avec des colonnes factices, vous trouverez beaucoup de sujets et de post concernant ce problème, mais ils ne m'ont pas apporté la solution. Alors, j'admets que je suis peut-être vachement dure de la comprenette, quoi qu'il en soit, une solution toute bête m'est enfin parvenue. Mais je vous explique d'abord mon chemin de réflexion.
J'ai commencé par créer un div englobant #principal, qui, positionné en relatif, contenait au départ plusieurs colonnes en position:absolute, avec un bottom à 0. Ce qui a normalement pour effet de tirer la colonne jusqu'en bas de la page. Oui, j'ai placé mon html à 100% et mon body à min-height:100%, et pourtant, même si la div englobante se tire à la hauteur de la fenêtre, en scrollant vers le bas les colonnes, qui sont plus longues que la hauteur de la fenêtre, "dépassent".
J'ai ensuite essayé de transformer mes colonnes en flottants, avec float:left. Alors c'est bon : j'ai bien compris que les blocs en float et positionnés sont retirés du "flux normal" : toujours le même problème, mes colonnes "dépassent".
M.... et re-m... mais qu'est-ce que j'ai fait d'incorrect ?? Et c'est encore pire sur les autres navigateurs (je travaille sur mozilla/mac) !!

La solution la voici : avez-vous pensé à placer un div pied de page ? ni flottant ni positionné, mais sur lequel j'ai placé clear:both pour éviter qu'il ne se juxtapose aux autres colonnes. Eh bien voilà, mon div #principal englobant....englobe le pied de page, qui comme par magie se place où je le souhaite, en pied de page... Et mon site s'étend jusqu'en bas, quelle que soit la hauteur des colonnes. Magnifique.
J'espère que ça vous aidera.
Modifié par crebindiou (19 Jan 2010 - 08:59)

Bonjour,

Félicitation, tu viens de trouver comment éviter que tes flottants ne dépassent de leur conteneur...

Il est également possible d'utiliser l'overflow, lorsque l'on ne souhaite pas utiliser de clear.

Je préfère le coup de l'overflow:hidden car il est lié au conteneur et non à l'élément suivant.

+1 à Laurie-Anne et à MoOx.

J'ajoute que les éléments positionnés en absolu sortent du flux et c'est donc tout à fait normal qu'ils "dépassent" : (re)lire le Guide de survie du positionnement CSS.

Le gros souci de l'overflow:hidden, tout de même, est qu'il cache le contenu dépassant du conteneur (son utilité première). Ce qui peut-être un sacré désagrément question accéssibilité lorsque ce même conteneur n'est pas très large, en effet, augmenter la taille de police aura donc tendance à la faire couler sous les limites du conteneur...

C'est pourquoi, personnellemnent, j'essaie de faire machine arrière en reprennant le mécanisme du clear, du "div" clear à l'ancienne... Mais il faut avouer qu'appliquer un contexte de formatage directement sur le conteneur en question est bien pratique et évite de devoir parfois ajouter des éléments HTML superflus.
Modifié par Nigel (19 Jan 2010 - 15:06)

Nigel a écrit :
Le gros souci de l'overflow:hidden, tout de même, est qu'il cache le contenu dépassant du conteneur (son utilité première). Ce qui peut-être un sacré désagrément question accéssibilité lorsque ce même conteneur n'est pas très large, en effet, augmenter la taille de police aura donc tendance à la faire couler sous les limites du conteneur...

Euh... Il suffit dans ce cas de ne pas fixer la hauteur de l'élément (ce qu'il est d'ailleurs toujours préférable de faire).

Je pensais à un cas comme celui-ci : http://www.nicolasbocquet.fr/temp/overflow.html
Le texte en un seul mot, où la largeur de son conteneur est fixe, doté d'overflow:hidden.
Sans overflow, le texte reste visible en dépassant du conteneur.

Comment feriez-vous, sachant que la largeur du conteneur ne doit pas s'adapter (contrainte spécifique) ?

(Ce n'est qu'un exemple épuré volontairement, en l'occurence, sans réelle utilité d'un overflow, mais ça pourrait être le cas dans un exemple concret, plus complet.)
Modifié par Nigel (21 Jan 2010 - 13:55)