Passons à un exemple de travail

Ce que nous voyons défauts de mise en page en termes de mise en œuvre de l'effet de pied de page cloué ? On voit ça
1) Le pied de page du site se trouve à l'intérieur d'un bloc avec id=layout qui n'a pas de pourcentage de hauteur. En théorie, celui-ci, les parents et le bloc de contenu .content-left doivent être définis sur une hauteur de 100 %. Des problèmes surviennent avec ce dernier - il n'est pas adapté pour cela. Par conséquent, un bloc intercalaire est manquant ou le pied de page est au mauvais niveau. En plus,
2) la hauteur du pied de page est variable (elle dépend du nombre d'éléments dans la liste et de la taille de la police, cela n'est pas visible depuis HTML, mais depuis CSS). ET
3) au-dessus de #mise en page il y a un bloc d'annonces avec une hauteur fixe de 90px ;
4) il n'y a pas de blocs d'alignement ni dans le pied de page ni (en général) dans le bloc #mise en page(Oui, mais au-dessus du bloc .rotated_posts; cependant, cela devrait peut-être être attribué au pied de page).

Point 4 - vous devez dessiner avec un script.
Il semblerait qu'il serait facile de comprendre le troisième point en ajoutant #layout(margin-top:-90px;) Mais rappelez-vous que ce bloc peut ne pas exister - il est supprimé par le coupe-bannière, ou les annonceurs décident soudainement de ne pas montre le. Il y a un certain nombre de pages sur le site où ce n'est pas le cas. Par conséquent, la dépendance marge supérieure d'un bloc d'annonces est une mauvaise idée. Bien mieux - placez-le à l'intérieur #mise en page Alors il ne gênera pas.

Le premier point est que pour que le pied de page cloué fonctionne, vous devez placer le 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 de la mise en page initialement correcte pour vous en passer.

Puisqu'on ne peut pas être plus fort que le dernier maquettiste du site, qui a "claqué" le footer dans le contenu, on repoussera l'idée de placer correctement le footer sur notre futur site (qui, donc, sera "plus cool" que Habr !), et nous disséquerons Habr avec javascript (userscript) jusqu'aux états corrects. (Disons tout de suite, ce n'est pas le maquettiste, pas l'aiguilleur qui est à blâmer, mais le type de site, bien sûr, détermine la décision stratégique de la maîtrise d'œuvre.) De cette façon, nous n'atteindrons pas l'idéal, car dans la première ou les deux premières secondes du processus de chargement, la page aura la mauvaise mise en page. Mais le concept et la capacité à surpasser le site le plus populaire dans le monde des informaticiens sont importants pour nous.

Par conséquent, au bon endroit dans le script (plus tôt, à la fin du chargement de la page), nous allons écrire les transferts des blocs DOM de publicité et du pied de page aux bons endroits. (Préparons-nous au fait qu'en raison des scripts utilisateur, la solution sera plus compliquée qu'une solution propre.)
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éplace le pied de page lay.parentNode.insertBefore(footer, lay.nextSibling);
Nous mettons les blocs à leur place - il reste maintenant à attribuer les propriétés nécessaires aux éléments. La hauteur du pied de page devra être définie exactement, simplement parce que nous la connaissons déjà au moment où le script utilisateur prend effet (chargement de fin de page). En raison du point de déclenchement du script utilisateur, comme indiqué ci-dessus, le saut d'affichage du pied de page sur la page est inévitable. Pouvez-vous essayer de faire une « bonne tête », mais avec un « mauvais jeu » ? Pour quoi? Le "bad game" du site permet de faire un concept sans super efforts, ce qui suffira à évaluer la qualité et ne sera pas nécessaire si vous "jouez correctement" sur votre projet.
if(foot)( //bloc-aligner

dans le pied de page h.apnd_el((clss:"clear", appendTo: footer)); var piedH = pied.offsetHeight; //...et mesurer la hauteur du footer ) if(topL && lay && footer && lay.nextSibling)( //aligner le bloc de la hauteur désirée dans le contenu ("layout") h.apnd_el((clss:" clear", css:( hauteur : (footH ||0) +"px"), appendTo : lay) ); lay.style.minHeight ="100 %"; h.addRules("#layout(margin-bottom :- "+ piedH +"px !important)html, corps (hauteur : 100%)"); )
Ici, nous nous sommes permis d'appliquer une fonction auto-écrite h.apnd_el, qui fait à peu près la même chose que dans jQuery -
$("").css((hauteur : piedH ||0)).appendTo($(pied de page))
Et puis - une autre fonction typique d'injection de règles CSS - h.addRules. Ici, vous ne pouvez pas vous en passer, car vous devez déclarer une règle avec " !important" - juste à cause des particularités des priorités de style du script utilisateur.

Avec ces morceaux de code, nous pouvons voir le pied de page cloué dans le script utilisateur (après l'avoir sauté) et comprendre parfaitement comment créer la mise en page. Il est ennuyeux d'utiliser un design de saut tous les jours, 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" (mettre une "coche" dans la liste des paramètres devant "pied de page cloué au bas"), à partir de la version 0.883_2012-09- 12.

Le pied de page cloué affecte-t-il la nécessité de mettre à jour les styles ZenComment, s'ils sont définis ? Oui. En raison de la complexité de la chaîne de priorité des styles, 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 pied de page cloué. Si vous ne mettez pas à jour les styles d'utilisateur (vers 2.66_2012-09-12+) - le pied de page fonctionnera de manière inexacte.

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

Le deuxième élément (de la liste des défauts de mise en page) est le raisonnement purement pour Habr (ils ne s'appliquent pas au script utilisateur et reprennent partiellement les précédents).

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

Conclusion : vous pouvez entièrement organiser la mise en page sur Habré, mais pour cela, vous avez besoin d'un concepteur de mise en page qui comprend clairement le comportement de la mise en page, en disposant les blocs dans le bon ordre. (Maintenant, le pied de page et la bannière supérieure ne sont "pas là" et pas de telle sorte qu'ils puissent simplement obtenir un pied de page cloué avec des styles.) Vous pouvez vous passer de JS si vous définissez la hauteur du pied de page en unités relatives, en prenant une certaine marge de espace pour l'indéfinité de la police.

Mise en œuvre

Si vous activez HabrAjax 0.883+, nous verrons le "pied de page cloué" fonctionner. Il s'adapte en hauteur à l'aide de scripts. Il vous permet d'évaluer à quel point les pages avec un pied de page cloué sont meilleures que les pages normales. Les styles d'utilisateur ZenComment sont compatibles avec les scripts, mais pour bon fonctionnement pied de page cloué avec eux, vous devez installer ZenComment version 2.66_2012-09-12 +.

Faits sur le comportement de mise en œuvre

Le chamanisme avec pied de page, styles et scripts est du chamanisme (uniquement soutenu par la théorie). DANS différents navigateurs comportement légèrement différent, mais à certains endroits - inattendu. Sans les scripts utilisateur et les blocs de réorganisation, les résultats seront différents. C'est ce que les expériences d'implémentation sur le script utilisateur ont donné.

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 avoir placé le pied de page en bas.

2) Chrome - il a surpris avec un "défilement errant" - des espaces vides sont ajoutés à la page avec une période d'une fois par seconde en bas - quelque chose ne va pas avec le calcul des hauteurs. Il est traité en ajoutant html,body(height:100%) au style utilisateur, mais sans garantie 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. Avec le saut - tout est en ordre, c'est le cas.

3) Opera - pas de sauts (v. 12.02) lors du chargement de la première page, mais un rechargement précipité peut montrer un saut de pied de page. Sinon, il conduit pas moins correctement que Fx.

Eh bien, vous devez spécifiquement apprendre à Chrome à se comporter correctement (avec un script) et déployer la version pour révision sous cette forme. 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 complète - elle ne prend pas en compte, par exemple, les cas de redimensionnement de la fenêtre par l'utilisateur. Vous pouvez également trouver des combinaisons rares (en pratique) de modification des hauteurs de pied de page avant et après le déplacement, où la logique commencera à échouer sans causer de désagréments. Les lacunes sont laissées délibérément, car l'équilibre entre la complexité de la révision et la solution temporaire est maintenu.

En conséquence, il s'est avéré être un schéma de travail tout à fait réalisable, du moins pour les ordinateurs de bureau rapides. Si un comportement de pied de page incorrect est détecté, le paramètre "underFooter" doit être désactivé.

Pour quelles pages est-il utile ?

Sur un site standard, sans styles utilisateur, même les courtes pages de questions-réponses dépassent 1500px, ce qui dans la plupart des cas est imperceptible avec les moniteurs horizontaux. Mais même avec des moniteurs ordinaires, on rencontre souvent des pages personnelles d'utilisateurs d'une hauteur d'environ 1300 pixels, où le pied de page non cloué apparaît dans toute sa splendeur. Pas très long et un certain nombre de pages dans les paramètres utilisateur.

Lorsque les styles utilisateur ZenComment sont appliqués, ils réduisent considérablement la hauteur de page requise et le script utilisateur HabrAjax peut ne pas afficher tout ou partie des barres latérales dans la barre latérale. Par conséquent, avec les scripts et les styles, l'effet d'un pied de page non cloué est beaucoup plus souvent observé. Par conséquent, il est logique que le correctif du pied de page soit apparu dans HabrAjax pour la première fois. Mais même un site ordinaire a un certain nombre de pages où un pied de page cloué serait utile.

Y aura-t-il un soutien?

Le comportement du site au cours de l'année écoulée montre que les développeurs (et donc la direction) ont commencé à implémenter des fonctionnalités qui n'existaient auparavant que dans les scripts utilisateur et les styles utilisateur. Par exemple, au début de l'année, j'ai écrit, où j'ai recueilli de nombreux petits souhaits. Six mois plus tard, j'y suis revenu et j'ai constaté avec satisfaction (à droite dans le texte ; vous pouvez lire l'"UPD" et les dates) qu'un certain nombre de fonctionnalités qualifiées de souhaits ont déjà été implémentées dans le site.

Ensuite, regardons les "flèches" au lieu des carrés pour évaluer les commentaires. Ils sont apparus dans les forces d'utilisateurs d'almalexa ("Prettifier") il y a environ 3 ans et ont été adoptés dans ZenComment il y a environ 2 ans. Il y a environ 2-3 mois, ils sont apparus sur le site. Il commence à croire qu'au bout d'un moment les flèches s'étaleront sur 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

Vous avez probablement vu le pied de page épinglé en bas plus d'une fois, quelle que soit la quantité de contenu. Faisons-le avec CSS !

Comment épingler un pied de page (footer) ou footer en bas d'une page web ?

1. Commençons par les styles - fichier style.css

html,corps(
marge : 0 ;
affichage:tableau ;
hauteur : 100 % ;
largeur : 100 %
famille de polices : Calibri, sans empattement ;
}

Emballage (
rembourrage : 20px
hauteur : automatique ;
}

Bas de page(
arrière-plan : #f1f1f1 ;
display:table-row;
hauteur : 1px ;
}

2. Code HTML
Voici tout le balisage et le lorem ipsum (texte modèle).

3. Les deux fichiers doivent se trouver dans le même répertoire.
Maintenant, nous redimensionnons la fenêtre du navigateur et regardons comment le pied de page est fixé en bas.

4. Nous regardons un exemple du travail du pied de page fixé en bas.

Comment pousser le pied de page vers le bas de la page? Cette question est posée par de nombreuses personnes confrontées à des mises en page pour le site. 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, respectivement, 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 agréable. Je vais maintenant vous montrer quelques 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 la structure habituelle suivante (votre mise en page peut différer, mais les méthodes sont universelles) :

De plus, pour obtenir le résultat souhaité, des blocs supplémentaires, des propriétés CSS, etc. seront ajoutés à la mise en page. Cependant, dans la mise en page où vous décidez 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, vous n'avez donc pas besoin de les ajouter à nouveau. Toutes les propriétés CSS qui sont directement impliquées dans le clouage du pied de page en bas sont fournies avec des commentaires.

Appuyez sur le pied de page vers le bas à l'aide du positionnement

Description de l'exemple

1. Tous les blocs de mise en page ont été enveloppés dans un bloc wrapper supplémentaire id= "wrapper" , qui a reçu une hauteur minimale ( propriété CSS ) de 100 % afin qu'il s'étende sur toute la hauteur de la fenêtre du navigateur, mais puisse s'étendre davantage si nécessaire. Cependant, comme les valeurs en pourcentage sont relatives à l'ancêtre, nous avons dû spécifier explicitement la hauteur (CSS) des balises et pour que cela fonctionne.
2. L'étape suivante était le positionnement absolu ( CSS ) du pied de page par rapport au bloc d'habillage sur sa face inférieure ( CSS ). Ainsi, le pied de page s'est avéré être pressé au bas de la page.
3. Étant donné que le positionnement absolu retire l'élément du flux, lorsque vous ajoutez des informations aux blocs de contenu et aux menus, certaines d'entre elles iront sous le pied de page enfoncé. Pour éviter que cela ne se produise, les éléments id= "content" et id= "menu" ont reçu un remplissage inférieur (CSS) égal à la hauteur du pied de page. Maintenant, ils vont passer sous le pied de page et le pousser vers le bas.
4. Étant donné que le bloc avec le menu dans notre mise en page 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 a été créé (class="clear" ) qui rompt l'habillage (propriété CSS). Au fait, si vous ne prévoyez pas d'implémenter le support pour IE6 et IE7, alors au lieu de ce bloc, vous pouvez appliquer un pseudo-élément au dernier bloc avant le pied de page (ici c'est "content" ) et juste le faire casser le flux.

Dans le premier paragraphe, une propriété CSS a été appliquée pour spécifier la hauteur minimale, qui ne comprend pas Internet Explorer 6. Mais il comprend la propriété comme la hauteur minimale. Aussi ce navigateur ignore la règle dans certains cas. Ces deux caractéristiques ont été utilisées dans cet exemple pour créer haka pour lui faire faire ce qu'il faut 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 supplémentaire id= "wrapper" qui a reçu une hauteur minimale (CSS) de 100 %. Cela a été fait pour que le bloc wrapper s'étende au moins sur toute la hauteur de la fenêtre du navigateur, mais si nécessaire (s'il y a beaucoup de contenu), il pourrait s'étendre davantage. Maintenant, la hauteur de notre wrapper est devenue égale à la hauteur de la fenêtre du navigateur, et la hauteur de la page HTML entière = la hauteur du wrapper + la hauteur du pied de page.
2. À la suite des actions du premier paragraphe, notre pied de page, bien que pressé au bas de la page, a dépassé la bordure inférieure de la fenêtre du navigateur, ce qui n'est pas bon. Pour le rendre visible, une marge supérieure négative (CSS) lui a été attribuée, dont la taille est égale à la hauteur du pied de page lui-même. Tout, le pied de page est enfoncé et se trouve en bas de page.
3. Étant donné que dans le paragraphe précédent, nous avons indiqué la marge négative supérieure au pied de page épinglé, lors de l'ajout d'informations aux blocs de contenu ou aux menus, une partie de celle-ci 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 même faire un peu plus) à la hauteur du pied de page. Ainsi, c'est ce bloc correctif qui va passer sous le pied de page appuyé et le pousser vers le bas, évitant ainsi que des informations ne soient masquées.
4. Une pause flottante (CSS) a été ajoutée à la zone de remplacement afin qu'elle ne s'enroule pas autour du menu si elle dépasse la hauteur du contenu. En conséquence, cette interruption de flux a été supprimée du pied de page lui-même car inutile.

Comme dans le premier exemple, un hack spécial a été appliqué ici pour IE6, vous permettant de définir une hauteur minimale pour celui-ci.