Passons à un exemple fonctionnel

Point 4 - vous devrez le dessiner avec un script.
Il semblerait facile de traiter le troisième point en ajoutant #layout(margin-top:-90px;) Mais rappelez-vous que ce bloc peut ne pas exister - il est supprimé par la découpe de la bannière, ou les annonceurs décident soudainement de ne pas l'afficher. Il y a un certain nombre de pages sur le site où ce n'est pas le cas. D'où la dépendance marge supérieure d'un bloc de publicités est une mauvaise idée. C'est bien mieux de le placer à l'intérieur #mise en page- alors il n'interférera avec rien.

Le premier point est que pour que le pied de page cloué fonctionne, vous devez placer un bloc de pied de page sous #mise en page. Cependant, avec l'aide de javascript, vous pouvez implémenter d'autres schémas de pied de page cloués, mais dans tous les cas, vous avez besoin de JS ou d'une mise en page initialement correcte pour vous en passer.

Puisque nous ne pouvons pas être plus forts que le dernier concepteur de mise en page de site Web qui a « giflé » le pied de page à l’intérieur du contenu, nous laisserons de côté l’idée de placer correctement le pied de page sur notre futur site Web (qui sera donc « plus cool »). que Habr !), et nous analyserons Habr avec javascript (userscript) à la bonne condition. (Disons tout de suite que ce n'est pas le concepteur d'agencement ou le mélangeur qui est à blâmer, mais le type de site, bien sûr, détermine la décision stratégique de la direction du projet.) De cette façon, nous n'atteindrons pas l'idéal, car dans le première ou deux secondes pendant le processus de chargement, la page aura une mise en page incorrecte. Mais ce qui est important pour nous, c'est le concept et la possibilité de surpasser en qualité le site Web le plus populaire du monde informatique.

Ainsi, au bon endroit dans le script (au début, à la fin du chargement de la page), nous écrirons les transferts des blocs DOM de publicité et de pied de page aux bons endroits. (Soyons préparés au fait qu'en raison des scripts utilisateur, la solution sera plus compliquée qu'une solution pure.)
var dQ = function(q)(return document.querySelector(q);) //pour raccourcir var topL = dQ("#topline"), lay = dQ("#layout"), foot = dQ("#footer" ); if(topL && lay) //banner - à l'intérieur du bloc de contenu lay.insertBefore(topL, lay.firstChild); if(lay && foot && lay.nextSibling) //déplacement du pied de page lay.parentNode.insertBefore(footer, lay.nextSibling);
Nous avons placé les blocs à leur place - il ne reste plus qu'à attribuer les propriétés nécessaires aux éléments. La hauteur du pied de page devra être définie avec précision, tout simplement parce que nous la connaissons déjà au moment où le script utilisateur est actif (fin de chargement de la page). En raison du point de déclenchement du script utilisateur, comme mentionné ci-dessus, un saut dans l'affichage du pied de page sur la page est inévitable. Vous pouvez essayer de faire bonne figure, mais avec un « mauvais jeu » ? Pour quoi? Le « mauvais jeu » du site vous permet de créer un concept sans effort supplémentaire, ce qui suffira à évaluer la qualité et ne sera pas nécessaire pour le « bon jeu » sur votre projet.
if(foot)( //bloc-aligner

Avec ces morceaux de code, nous pourrons voir le pied de page cloué dans le script utilisateur (après avoir sauté vers le bas) et bien comprendre comment construire la mise en page. Utiliser quotidiennement une structure de saut est désagréable, il est donc recommandé de le faire uniquement à des fins de démonstration et de test. Dans le script utilisateur HabrAjax, j'ai installé un script similaire, en le fermant avec le paramètre « underFooter » (cochez la case dans la liste des paramètres avant « pied de page cloué en bas »), en commençant par la version 0.883_2012-09-12.

Le fait de clouer le pied de page affecte-t-il la nécessité de mettre à jour les styles ZenComment s'ils sont installés ? Oui. En raison de la chaîne complexe de priorités de style, dans laquelle les styles insérés par le script utilisateur ont la priorité la plus basse, nous avons dû légèrement ajuster les styles utilisateur pour possibilités travailler avec un pied de page cloué. Si vous ne mettez pas à jour vos styles utilisateur (vers 2.66_2012-09-12 +), le pied de page ne fonctionnera pas correctement.

Bloc rotation_post (trois articles populaires du passé) semble plus logique avec un pied de page, donc dans le vrai script, il est également déplacé vers le pied de page.

Le deuxième point (de la liste des défauts de mise en page) est une discussion uniquement pour Habr (il ne s'applique pas au script utilisateur et répète partiellement les précédents).

Les pages ont un problème qui les empêche de créer un pied de page précis en utilisant du CSS pur - une hauteur de pied de page non définie en fonction des tailles de police par défaut dans le navigateur. Pour implémenter un pied de page à l'aide de CSS, vous devez sélectionner les hauteurs relatives des polices, mais elles peuvent ne pas fonctionner si l'ordinateur de l'utilisateur ne dispose pas des polices requises. Par conséquent, la solution doit inclure un JavaScript capable d'ajuster la position approximative du pied de page à la position exacte à l'aide de transitions. Ou, après avoir examiné l'acceptabilité de la solution réalisée dans un script utilisateur sur différentes plateformes, effectuez une installation calculée d'un pied de page cloué - les premières observations montrent que la solution est pratique.

Conclusion : il est possible de concevoir entièrement une mise en page sur Habré, mais pour cela, vous avez besoin d'un maquettiste qui comprend clairement le comportement de la mise en page et place les blocs dans le bon ordre. (Actuellement, le pied de page et la bannière supérieure sont « au mauvais endroit » et pas de telle manière que vous puissiez simplement styliser le pied de page.) Vous pouvez vous passer de JS si vous définissez la hauteur du pied de page en unités relatives, en prenant quelques place à l’incertitude des polices.

Mise en œuvre

Faits sur le comportement de mise en œuvre

1) Firefox - manque inattendu de sauts de pied de page. C'est étrange qu'ils ne soient pas là - le rendu se produit après que le pied de page soit placé en bas.

2) Chrome - cela m'a surpris avec le "défilement errant" - des espaces vides en bas sont ajoutés à la page avec une période d'une fois par seconde - quelque chose ne va pas avec le calcul des hauteurs. La solution consiste à écrire html,body(height:100%) dans le style utilisateur, mais rien ne garantit que cela fonctionnera toujours. Il est plus fiable de vérifier si le document ne dépasse pas la hauteur de la fenêtre, et si ce n'est pas le cas, déplacez le pied de page, sinon rien. Sauter, c'est bien, ça existe.

3) Opera - pas de sauts (v. 12.02) lors du premier chargement de la page, mais un rechargement précipité peut afficher un saut de pied de page. Sinon, il ne se comporte pas moins correctement que Fx.

Eh bien, vous devrez spécialement apprendre à Chrome à se comporter correctement (avec un script) et déployer la version sous cette forme pour l'afficher. Par conséquent, la section du script utilisateur est un peu plus compliquée que celle donnée dans l'article.

Il convient de rappeler qu'il ne s'agit pas d'une implémentation à part entière - elle ne prend pas en compte, par exemple, les cas de redimensionnement des fenêtres par l'utilisateur. Vous pouvez également trouver de rares (en pratique) combinaisons de changements de hauteur de pied de page avant et après le déplacement, où la logique commence à échouer sans entraîner d'inconvénients. Les lacunes ont été délibérément laissées de côté, car un équilibre a été maintenu entre la complexité de l'amélioration et le caractère temporaire de la solution.

En conséquence, nous avons obtenu un système d'exploitation tout à fait fonctionnel, du moins pour les ordinateurs de bureau rapides. Si un comportement incorrect du pied de page est détecté, le paramètre « underFooter » doit être désactivé.

Pour quelles pages est-ce utile ?

Si vous utilisez les styles utilisateur ZenComment, ils réduisent considérablement la hauteur de page requise et le script utilisateur HabrAjax peut ne pas afficher tout ou partie des blocs latéraux dans la barre latérale. Par conséquent, avec les scripts et les styles, l'effet d'un pied de page non attaché est sensiblement plus souvent observé. Par conséquent, il est logique que le correctif du pied de page apparaisse pour la première fois dans HabrAjax. Mais un site Web classique comporte également un certain nombre de pages pour lesquelles un pied de page précis serait utile.

Y aura-t-il du soutien ?

Le comportement du site au cours de l'année écoulée montre que les développeurs (et donc la direction) ont commencé à introduire des fonctionnalités qui n'existaient auparavant que dans les scripts et styles utilisateur. Par exemple, au début de l'année, j'ai écrit où j'avais collecté de nombreux petits vœux. Six mois plus tard, j'y suis revenu et j'ai eu le plaisir de constater (directement dans le texte ; vous pouvez voir les « UPD » et les dates) qu'un certain nombre de fonctionnalités décrites comme des souhaits avaient déjà été implémentées dans le site.

Ensuite, regardons les « flèches » au lieu des carrés pour noter les commentaires. Ils sont apparus dans les noms d'utilisateur d'Almalexa (« Prettifier ») il y a 3 ans et ont été adoptés dans ZenComment il y a 2 ans. Il y a environ 2-3 mois, ils sont apparus sur le site. On commence à croire qu'au bout d'un certain temps les flèches seront espacées d'une certaine distance, comme cela se fait dans ZenComment (une flèche à gauche du chiffre, la seconde à droite) afin de moins rater. Ajouter des balises

Comment pousser le pied de page vers le bas de la page? Cette question est posée par beaucoup de ceux qui ont rencontré la mise en page des mises en page de sites Web. Le fait est que si la hauteur des blocs dans ces mises en page n'est pas explicitement spécifiée, cela dépend de la quantité de leur contenu ; par conséquent, si ce contenu est suffisamment petit, alors la mise en page entière peut occuper une hauteur inférieure à la fenêtre du navigateur. . Naturellement, tout cela n’a pas l’air très joli. Je vais maintenant vous montrer plusieurs façons de pousser le pied de page vers le bas de la page et ainsi rendre la mise en page plus attrayante et familière.

Dans chacun des exemples nous partirons du fait que disposition du site a cette structure habituelle (votre mise en page peut varier, mais les méthodes sont universelles) :

Ensuite, des blocs supplémentaires, des propriétés CSS, etc. seront ajoutés à la mise en page pour obtenir le résultat souhaité. Cependant, dans la mise en page dans laquelle vous avez décidé de pousser le pied de page vers le bas de la page, ces blocs ou certaines propriétés peuvent déjà être présents, il n'est donc pas nécessaire de les ajouter à nouveau. Toutes les propriétés CSS directement impliquées dans le placement du pied de page en bas sont accompagnées de commentaires.

Appuyez le pied de page vers le bas en utilisant le positionnement

Description de l'exemple

1. Tous les blocs de mise en page étaient enfermés dans bloc supplémentaire-wrapper id="wrapper" , qui a reçu une hauteur minimale ( Propriété CSS) égal à 100 % pour qu'il s'étende sur toute la hauteur de la fenêtre du navigateur, mais si nécessaire, il peut s'étendre davantage. Cependant, comme les valeurs en pourcentage sont calculées par rapport à l'ancêtre, pour que cela fonctionne, nous avons dû spécifier explicitement la hauteur (CSS) des balises et.
2. L'étape suivante consistait à positionner absolument (CSS) le pied de page par rapport au bloc wrapper sur sa face inférieure (CSS). Ainsi, notre pied de page a été pressé jusqu'en bas de la page.
3. Étant donné que le positionnement absolu retire l'élément du flux, lors de l'ajout d'informations aux blocs avec du contenu et des menus, une partie de celle-ci ira sous le pied de page enfoncé. Pour éviter que cela ne se produise, les éléments id="content" et id="menu" ont été définis pour avoir un remplissage inférieur (CSS) égal à la hauteur du pied de page. Désormais, ce seront eux qui passeront sous le pied de page et le pousseront vers le bas.
4. Étant donné que dans notre mise en page, le bloc avec le menu est flottant (CSS), le pied de page ne le remarquera toujours pas et, par conséquent, le menu ne le poussera pas vers le bas. Pour résoudre ce problème, un autre bloc (class="clear") a été créé pour rompre l'habillage (propriété CSS). À propos, si vous ne prévoyez pas de prendre en charge IE6 et IE7, au lieu de ce bloc, vous pouvez appliquer un pseudo-élément au dernier bloc avant le pied de page (ici, il s'agit de « contenu ») et simplement en interrompre le flux.

Dans le premier point, une propriété CSS a été appliquée pour spécifier une hauteur minimale, ce qui ne comprend pas Internet Explorer 6. Mais il considère la propriété comme une simple hauteur minimale. Aussi ce navigateur dans certains cas ignore la règle. Ces deux fonctionnalités ont été utilisées dans dans cet exemple pour créer haka pour lui faire faire ce qu'il doit faire sans affecter les autres navigateurs.

Appuyez sur le pied de page vers le bas à l'aide de blocs supplémentaires

Description de l'exemple

1. Tous les blocs de mise en page, à l'exception du pied de page, ont été enveloppés dans un bloc id="wrapper" supplémentaire, défini sur une hauteur minimale (CSS) de 100 %. Cela a été fait pour que le wrapper de bloc s'étende au moins sur toute la hauteur de la fenêtre du navigateur, mais si nécessaire (s'il y avait beaucoup de contenu), il pourrait s'étendre davantage. Désormais, la hauteur de notre wrapper est égale à la hauteur de la fenêtre du navigateur et la hauteur de la page HTML entière = hauteur du wrapper + hauteur du pied de page.
2. À la suite des actions du premier point, bien que notre pied de page ait été enfoncé jusqu'au bas de la page, il dépassait le bord inférieur de la fenêtre du navigateur, ce qui n'est pas bon. Pour le rendre visible, une marge supérieure négative (CSS) a été définie, dont la taille est égale à la hauteur du pied de page lui-même. Ça y est, le pied de page est enfoncé et situé en bas de page.
3. Puisque dans le paragraphe précédent nous avons spécifié une marge négative supérieure pour le pied de page enfoncé, lors de l'ajout d'informations à des blocs avec du contenu ou des menus, une partie ira sous ce pied de page. Pour éviter cela, un autre bloc a été créé avec id="footer_correct" , dont la hauteur est égale (vous pouvez la rendre encore un peu plus grande) à la hauteur du pied de page. Ainsi, c'est ce bloc correcteur qui va passer sous le pied de page enfoncé et le repousser vers le bas, empêchant ainsi le masquage des informations.
4. Un saut de ligne (CSS) a été ajouté au bloc de réglage pour l'empêcher de s'enrouler autour du menu s'il dépasse la hauteur du contenu. En conséquence, cette interruption du flux a été supprimée du pied de page lui-même, car elle était inutile.

Comme dans le premier exemple, pour IE6, un hack spécial a été utilisé ici qui vous permet de définir sa hauteur minimale.

Salut tout le monde!

Le site est esthétique si tous ses éléments sont en place. Cependant, il arrive souvent que tout semble normal, mais que quelque chose ne va toujours pas... Par exemple, si la page est courte, le pied de page n'est pas enfoncé jusqu'au bas de la page, mais se trouve là où il devrait être - après le bloc principal du site. Ça n'a pas l'air très joli.

Par conséquent, aujourd'hui, nous allons vous expliquer comment appuyer le pied de page du site jusqu'au bord inférieur de la fenêtre du navigateur.

Nous fixerons donc les exigences suivantes pour le sous-sol :

• le pied de page est appuyé vers le bas de l'écran lorsque la hauteur de la fenêtre du navigateur est supérieure à la hauteur de la page, quel que soit le contenu ;
• le pied de page est à sa place lorsque le volume du contenu est supérieur à la hauteur de la fenêtre du navigateur ;
• fonctionne dans tous les navigateurs populaires ;
• fiabilité - ne dépend pas de la complexité de la mise en page.

Par exemple, prenons pages simples, composé de deux blocs principaux : principal (principal) et sous-sol (pied de page). Faisons en sorte que le bloc principal occupe toute la zone de la fenêtre du navigateur, quelle que soit la quantité de contenu, tout en appuyant sur le pied de page en bas de l'écran pour qu'il n'apparaisse pas dans le navigateur bande verticale faire défiler. Comment nous procédons :

Étape 1

Nous fabriquons 2 blocs : principal (principal) et sous-sol (pied de page). Nous étirons le conteneur principal sur toute la hauteur de l'écran du navigateur (hauteur min) et spécifions strictement la hauteur du pied de page (hauteur).

Dans ce cas, la hauteur totale du site sera la hauteur de l’écran + la hauteur du pied de page.

Étape 2

Nous utilisons une marge négative (margin-top) pour « entrer » le bloc principal afin que la hauteur du site ne soit que de 100 % de la hauteur de l'écran.

Avec cette disposition des blocs et avec une quantité suffisante de contenu (par exemple du texte) dans le bloc principal, il est possible de superposer le contenu du bloc principal sur le pied de page :

Étape 3

Pour éviter ce problème potentiel, ajoutez un bloc vide à la fin du bloc principal, dont la hauteur n'est pas inférieure à la hauteur du pied de page (ou mieux encore, un peu plus pour qu'il y ait un peu d'espace entre le contenu et le bas de page):

Désormais, s’il y a beaucoup de contenu, cela déplacera le bloc vide vers le bas. Et cela abaissera le pied de page, empêchant le contenu de s'y adapter.

Voyons à quoi cela ressemble dans le code :

Remarque : lorsque vous utilisez une disposition en blocs et des blocs principaux flottants (colonnes) pour .hFooter, vous devez ajouter clear: Both afin que le pied de page soit situé sous les colonnes. :

Si vous maîtrisez déjà un peu, alors la question peut se poser : « Pourquoi utiliser un élément supplémentaire quand vous pouvez utiliser padding-bottom ?

La réponse est que vous ne pouvez pas simplement l'utiliser ici, puisque la taille du bloc est égale à ses dimensions + la largeur du rembourrage interne + la largeur des bordures. Une combinaison de min-height: 100% et padding-bottom donnera à la hauteur du site une hauteur supérieure à la hauteur de l'écran. Par conséquent, même s’il n’y a aucun contenu, le pied de page sera hors écran.

L'inconvénient de cette technique est l'utilisation d'un élément hFooter vide supplémentaire. En conditions réelles (lorsque le contenu du site n'est pas vide et est appliqué disposition des blocs) cela peut être évité en utilisant - cette technique aidera à effacer le flux sans utiliser élément supplémentaire, et pour que le contenu ne rentre pas dans le pied de page, nous écrirons padding-bottom dans les colonnes.

Problèmes avec les couches Z

Dans la technique décrite ci-dessus, le pied de page était relevé avec un retrait négatif vers le haut. Cela soulève un problème potentiel avec les couches Z. Par exemple, nous devons afficher une fenêtre pop-up (que ce soit un div), qui sera positionnée par rapport au conteneur principal.

Tout va bien jusqu'à ce que notre fenêtre pop-up et notre pied de page se croisent (et cette situation se produit assez souvent) - c'est là que les problèmes commencent. Même si la fenêtre contextuelle possède l'indice z le plus élevé, elle sera recouverte par le pied de page, car la popup parent a un z-index inférieur au pied de page :

Dans ce cas, vous devez rechercher une opportunité de positionner la fenêtre non pas par rapport à main, mais par rapport à un autre élément enfant situé à l'intérieur de main. Ainsi, nous nous débarrasserons de la spécification du z-index pour le main et le pied de page. Mais cette option n’est pas toujours possible, considérons donc la deuxième option consistant à appuyer sur le pied de page.

Solution 2 - positionnement absolu

L'idée est similaire à la solution 1 :

• On étend le bloc principal sur toute la hauteur de l'écran ;
• Nous réservons de l'espace pour le sous-sol ;
• Par rapport au bloc principal, nous positionnons le sous-sol tout en bas en utilisant un positionnement absolu.

HTML : relatif ; /* pour que les éléments enfants soient positionnés par rapport à ce bloc */) .footer ( hauteur : 50px ; position : absolue ; gauche : 0 ; bas : 0 ; largeur : 100% ; ) * html .footer ( bottomy : expression(parentNode.offsetHeight % 2 ? style.bottom= "-1px" : style.bottom= "0px" ) ; /* hack pour e6, qui a un montant avec un décalage de 1px */}

Cette approche résoudra le problème des fenêtres pop-up, car... le pied de page et la fenêtre contextuelle auront un parent commun, ce qui signifie qu'il n'y aura pas de surprises avec les couches Z.

L’inconvénient des deux méthodes est que les deux méthodes ne conviennent que pour un sous-sol à hauteur fixe.

C'est tout pour aujourd'hui. Vous savez maintenant comment appuyer sur le pied de page jusqu'en bas de l'écran. différentes façons et quels problèmes peuvent survenir.

Abonnez-vous aux mises à jour et attendez avec impatience de nouvelles publications intéressantes. Au revoir.