Fait avec des colonnes de faux
Lorsque vous démarrez la mise en œuvre de la disposition d'un site web en utilisant CSS et HTML DIV, vous serez inévitablement confrontés au problème suivant:
Comment puis-je la force de deux colonnes à la même hauteur?
Vous voulez obtenir quelque chose comme ceci:
Mais quoi que vous fassiez, vous n'êtes pas en mesure d'étendre la barre latérale jusqu'à ce que le pied de page. Vous vous retrouvez avec quelque chose comme ceci:
Beaucoup ont suggéré d'utiliser des techniques CSS difficile de contourner le problème, tandis que dans aucun fait des techniques de travail parfaitement dans tous les cas. Il est fastidieux de rendre ces méthodes de travail dans de nombreuses situations.
Certains ont suggéré des techniques telles que pavage une image de fond pour donner une fausse impression de longues colonnes. Cette technique est appelée colonnes faux . Ce hack fonctionne presque, mais vous savez - il s'agit d'un hack sale aussi.
Les gens méprisent toujours l'aide d'une solution basée sur JavaScript pour résoudre ce problème. Je ne sais pas pourquoi, mais permettez-moi de vous dire la vérité - une solution basée sur JavaScript pour résoudre ce problème n'est pas pire que toute autre solution. En fait, si vous utilisez JavaScript, vous pouvez gagner quelques heures de frustration d'essayer de faire avancer les choses de travail. Les gens vont vous mettre en garde contre cela en disant: «Que se passerait-il si l'utilisateur éteint JavaScript?". Croyez-moi, si l'utilisateur a désactivé JavaScript, la plupart des web est rompu pour lui de toute façon. Votre barre latérale n'a pas d'importance pour lui. Ne prétendez pas comme il le fait.
Voici comment vous pouvez contourner le problème en utilisant JQuery:
Mettez quelque chose comme ça dans votre gestionnaire d'événements prêts:
$ (". Sidebar"). Hauteur (Math.max ($(". contenu "). Height (), $ (". Sidebar ") ())); hauteur. C'est tout. Maintenant, lancez faire avancer les choses au lieu de jouer avec tous ces petits détails, et cesser d'essayer d'utiliser les CSS pour résoudre tous les problèmes fou.
Je suis d'accord avec vous. Les gens se focalisent trop sur le fait de la bonne façon au lieu de faire les choses comme autorisé à ne pas prendre une semaine. Je leur dis Cessez de vous inquiéter, commencer à faire!
Est-ce que le travail tel quel, ou avez-vous pour ajouter un peu de code pour gérer redimensionnement de la fenêtre, le redimensionnement de la police, le cas où le texte de "contenu" est plus petit que le texte "sidebar", etc?
Oups, j'ai oublié un autre point: j'ai utilisé ce genre de technique, mais sans JQuery, et j'ai eu un problème: alors que je suis le redimensionnement des fenêtres de Firefox, Javascript ne reçoit pas de "redimensionner" les événements, de sorte que la mise en page est gâché jusqu'à. Lorsque vous avez terminé de redimensionner la fenêtre, cela fonctionne, si.
IIRC IE n'a pas ce bug.
Bon point Fabien, je suppose que vous avez à gérer les cas où $ (". sidebar"). height ()> $ (". contenu"). height () faute de quoi la barre latérale sera tronqué et vous ne verrez pas tous ses contenu.
Merci pour le pointeur. Un de mes clients ont rencontré ce problème et j'ai dû faire preuve de créativité pour les aider. Bon à savoir je n'étais pas seul.
Normalement, je essayer de résoudre les problèmes mise en page avec CSS, je n'ai jamais pensé à l'aide d'un JQuery avant. J'ai certainement eu le problème encadré avant! Je vais essayer à l'avenir, Merci.
Michel,
J'ai mis à jour le code pour résoudre votre problème.
Salut!
La solution la plus simple que j'ai trouvé, après beaucoup, beaucoup de recherches il ya plusieurs mois, est d'utiliser les tableaux
Il ya des choses qui peut être fait avec DIV, et les situations où DIV excellent travail, mais nous devons y faire face. Si vous voulez créer une page avec pas de hacks, les tables sont les meilleurs.
Je pense qu'un écrit un post à ce sujet il ya quelques mois:
http://www.codigomanso.com/en/2009/02/should-i-use-tables-for-layout/
Quoi qu'il en soit, c'est comme vous l'avez mentionné le problème de Fibonacci. Vous pouvez utiliser la récursivité, mais, sérieusement, si vous prévoyez de calculer plus que le nombre 30, ce que vous avez à utiliser est un «pour». Même si vous ne voulez que le numéro 10.
Vraiment intéressant blog, je suis vraiment en profiter!