C'est une sorte de cauchemar ! Pourquoi le pied de page de votre site « réapparaît » et modifie-t-il le design ? Est-il vraiment impossible d'appuyer correctement le pied de page jusqu'au bas de la page avec quelque chose ? Du contenu ou des briques au moins ! Brick ne rentre pas dans le moniteur ?
Je vois, alors asseyez-vous et ne faites rien jusqu'à ce que vous ayez lu notre article jusqu'à la fin.
Créer le bon pied de page pour votre site Web
De nombreux propriétaires de sites Web rencontrent ce problème lorsque le pied de page flotte simplement vers le haut. Et puis on ne sait pas quoi faire. Le plus souvent, les conceptions de sites Web créées à la hâte et par vous-même souffrent de cet inconvénient ( cercle " mains folles» ) ou aux webmasters débutants.
En même temps, rien de grave ne se produit dans les premières étapes de la vie du site. Et cette idylle perdure tant que le contenu met « son poids » sur le sous-sol, l’empêchant de remonter. Mais cela vaut la peine de placer de plus petits volumes de matériel sur la page, et le pied de page récemment « calme » monte instantanément vers le haut, donnant à l'ensemble de la conception du site une apparence inappropriée.
Pour éliminer ce « défaut » du modèle conçu, il n'est pas nécessaire de dépenser de l'argent pour les services d'un webmaster. Le plus souvent, le pied de page du site peut être mis en place vous-même. Considérons tout options possibles Pour résoudre ce problème :
Première façon
La première façon de « lier » le pied de page « au bas » de la page est basée sur Basé sur CSS. Commençons par donner un exemple de code, puis examinons de plus près son implémentation :
html ( hauteur : 100 % ; ) en-tête, navigation, section, article, côté, pied de page ( affichage : bloc ; ) corps ( hauteur : 100 % ; ) #wrapper ( largeur : 1 000 px ; marge : 0 auto ; hauteur min : 100 %; hauteur : auto !important ; hauteur : 100 % ; ) #header ( hauteur : 150 px ; couleur d'arrière-plan : rgb(0,255,255); ) #content ( remplissage : 100 px; hauteur : 400px; couleur d'arrière-plan : rgb(51,255,102) ; ) #pied de page ( largeur : 1000px ; marge : -100px auto 0 ; hauteur : 100px ; position : relative ; couleur d'arrière-plan : rgb(51,51,204); )
Pour attacher une balise de pied de page au bas de la page
html ( hauteur : 100 % ; ) corps ( hauteur : 100 % ; )
Nous définissons également la hauteur minimale de la couche de conteneur à 100 %. Si la largeur du contenu est supérieure à la hauteur du conteneur, définissez la propriété sur auto . Grâce à cela, le wrapper s'adaptera automatiquement à la largeur du contenu placé sur la page :
#wrapper ( hauteur min : 100 % ; hauteur : auto !important ; hauteur : 100 % ; )
La ligne de code « hauteur : 100 % » est destinée aux anciennes versions d'IE qui n'acceptent pas la propriété min-height.
Pour séparer l'espace d'un pied de page dans la conception de la page, nous définissons un retrait pour la balise
#content ( remplissage : 100px ; )
Sur à ce stade nous obtenons une page Web en plein écran avec 100 pixels supplémentaires, qui est « neutralisée » par une valeur de marge négative pour le pied de page (marge : -100px) lorsque sa position est définie sur relative (position : relative). Ainsi, en utilisant une valeur de remplissage négative, nous « tirons » le pied de page dans la zone du conteneur, dont la hauteur est fixée à 100 %.
DANS dans cet exemple le balisage des documents Web est spécifié à l'aide de balises HTML 5 relativement nouvelles, qui peuvent être mal interprétées versions obsolètes navigateurs. Pour cette raison, la conception entière de la page peut ne pas s'afficher correctement. Pour éviter cela, vous devez remplacer les nouvelles balises de l'arsenal de la version 5 du langage hypertexte par des balises classiques
Version améliorée
La méthode évoquée ci-dessus pour rendre le pied de page en bas de page « inébranlable » ne convient pas à tout le monde. Si vous envisagez de modifier et d'améliorer la conception de votre site à l'aide de fenêtres contextuelles à l'avenir, il est préférable d'arrêter d'utiliser la mise en œuvre précédente.
Le plus souvent utilisé dans la mise en œuvre de fenêtres pop-up Propriété CSS indice z. À l’aide de ses valeurs, vous spécifiez l’ordre dans lequel les calques sont empilés les uns sur les autres.
Plus la valeur de l'indice z d'un élément est élevée, plus il apparaîtra haut dans la pile globale de « superposition ».
Mais comme dans l'exemple précédent nous avons utilisé une valeur de remplissage négative pour le pied de page, Partie inférieure la popup se chevauchera zone supérieure sous-sol Même s'il faudra valeur plus élevée indice z. Parce que le parent (wrapper) de la fenêtre contextuelle a toujours une valeur inférieure pour cette propriété.
Voici une option plus avancée :
CSS - exemple de code :
html, corps ( hauteur : 100 % ; ) .header ( hauteur : 120 px ; couleur d'arrière-plan : rgb (0 255 102 ); ) .main ( hauteur min : 100 % ; position : relative ; couleur d'arrière-plan : rgb (100 255 255 ); ) .footer ( hauteur : 150 px ; position : absolue ; gauche : 0 ; bas : 0 ; largeur : 100 % ; couleur d'arrière-plan : rgb(0,0,153); )
Comme vous pouvez le voir dans le code, nous avons placé le pied de page dans le cadre de l'élément principal. Nous définissons le positionnement relatif du conteneur et le positionnement absolu du pied de page. Nous avons fixé le sous-sol tout en bas du conteneur, en définissant sa position à gauche et en haut sur 0.
Option pour un sous-sol à hauteur non fixe
Les implémentations précédentes peuvent garantir que le pied de page est toujours en bas de la page. Mais seulement si le pied de page a une largeur fixe. Mais que se passe-t-il si la quantité de contenu qui y est publiée ne peut pas être prédite ?
Cela nécessitera une option plus avancée pour un sous-sol non fixe. Il définit le pied de page sur table-row pour sa propriété d'affichage. Cela le fera apparaître sous forme de ligne de tableau :
Il s'agit d'un paragraphe situé en pied de page du site. Le pied de page n’est pas fixe, sa taille peut donc être ajustée à la taille du contenu.
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 :
| <HTML > <tête > <titre > Le pied de page est enfoncé vers le bas</titre> <type de style = "texte/css" >* (marge : 0 ; remplissage : 0 ;) /* réinitialiser le remplissage */ body ( background : #fff;) html,body ( height : 100% ; /* définir la hauteur du corps du document */).main ( / * bloc principal , qui doit s'étendre jusqu'au pied de page */ background: #999; /* couleur d'arrière-plan du bloc principal (pour plus de clarté) */ min-height: 100%; /* définir la hauteur minimale du bloc principal */ ) * html .main ( /* hack pour ie6 */ height: 100%; /* pour ie6, car il ne comprend pas la hauteur min */).hFooter ( /* ceci est un espaceur dans le bloc principal - nous nous réservons espace pour le sous-sol */ hauteur : 40px ; /* hauteur de notre pied de page */).footer ( /* pied de page */ fond : #0000CC ; /* couleur d'arrière-plan du pied de page (pour plus de clarté) */ couleur : #fff ; hauteur : 40px ; /* hauteur du pied de page */ margin-top: -40px ; /* faire un retrait négatif en hauteur égal à la hauteur du pied de page pour s'adapter clairement à la taille de l'écran */)</style> </tête> <corps > <classe div = "principale" > C'est le bloc principal<classe div = "hFooter" > </div> <classe div = "pied de page" > C'est le sous-sol</div> </corps> </html> |
Remarque : lorsque vous utilisez une disposition en blocs et des blocs principaux flottants (colonnes) pour .hFooter, vous devez ajouter clear: les deux afin que le pied de page soit situé sous les colonnes. :
| .hFooter ( clair : les deux ; hauteur : 40px ; ) |
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. Dans des conditions réelles (lorsque le contenu du site n'est pas vide et que la disposition en blocs est utilisée), cela peut être évité en utilisant - cette technique permettra d'éclaircir 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.
| <classe div = "principale" > [...] <classe div = "popup" > [...] </div> </div> <classe div = "pied de page" > [...] </div> |
| .main ( position : relative ; z-index : 1 ; /* z-index inférieur à celui du pied de page pour qu'il soit visible */) .popup ( position : absolue ; z-index : 100 ; [ ...] ) .footer ( hauteur : 50px ; margin-top : -50px ; position : relative ; /* pour que vous puissiez définir le z-index */ indice z : 2 ; /* plus que principal pour être visible */} |
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. Bien que la fenêtre contextuelle ait 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.
Appuyez sur le pied de page en bas de l'écran. Exigences:
- 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
Théorie
Il est recommandé de remplir toute la zone disponible de l'écran du navigateur avec le site (au moins en hauteur pour les conceptions statiques en largeur).
Solution
Par exemple, prenons une page simple composée de deux blocs principaux : main et footer. Assurons-nous 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 jusqu'en bas de l'écran pour qu'une barre de défilement verticale n'apparaisse pas dans le navigateur. Comment nous procédons :
Étape 1
Nous fabriquons 2 blocs : principal (principal) et sous-sol (pied de page). Nous étendons le conteneur principal sur toute la hauteur de l'écran du navigateur () et nous spécifions de manière rigide la hauteur du pied de page ().
Dans ce cas, la hauteur totale du site sera la hauteur de l’écran + la hauteur du pied de page.
Étape 2
La note: Lorsque vous utilisez une disposition en blocs et des blocs principaux flottants (colonnes) pour .hFooter, vous devez ajouter : les deux afin que le pied de page soit situé sous les colonnes. :
HFooter ( clair : les deux ; hauteur : 40px ; )
Testé dans :
Note 1: Si vous maîtrisez déjà un peu CSS, alors la question peut se poser : « Pourquoi utiliser un élément supplémentaire si vous pouvez l'utiliser ? La réponse est que vous ne pouvez pas simplement l'utiliser ici, parce que... La taille d'un bloc est égale à sa largeur et sa hauteur + la somme des rembourrages internes + la somme des épaisseurs des bordures. Lien : 100% et donnera une hauteur du site supérieure à la hauteur de l'écran. Par conséquent, même s’il n’y a aucun contenu, le pied de page sera en dehors du « premier écran ». Voir ci-dessous pour savoir comment contourner ce problème.
Note 2. DANS Versions d'opéra 9.5 et versions ultérieures, lors de l'ajout de doctype, cet exemple ne fonctionnera pas. Options de solution de contournement :
- ajoutez au moins un bloc flottant à la balise du conteneur principal : C'est le bloc principal
- ajoutez deux propriétés pour html, body :
Html,body ( hauteur : 100 % ; flottant : gauche ; largeur : 100 % ; )
- placez les styles dans un fichier CSS séparé :
mise à jour 8.12.09 - Inconvénient de cette technique
Il s'agit de l'utilisation d'un élément hFooter vide supplémentaire. Dans des conditions réelles (lorsque le contenu du site n'est pas vide et que la mise en page en bloc est utilisée), cela peut être évité en utilisant - cet exemple permettra d'éclaircir le flux sans utiliser d'élément supplémentaire, et pour que le contenu ne rentre pas sur le pied de page, nous l'écrirons dans les colonnes
mise à jour du 28/12/09 - 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 contextuelle (que ce soit div class="popup"), qui sera positionnée par rapport au conteneur principal.
Main ( position : relative ; /* pour que les éléments enfants soient positionnés par rapport à ce bloc */ z-index : 1 ; /* z-index inférieur au pied de page pour qu'il soit visible */ ) .popup ( position : absolue ; z-index : 100; [...] ) .footer ( height: 50px; margin-top: -50px; position: relative; /* afin que vous puissiez définir le z-index */ z-index: 2; / * supérieur à celui principal pour être visible */ )
Tout va bien jusqu'à ce que la fenêtre contextuelle et le sous-sol se croisent (et cette situation se produit assez souvent) - c'est là que les problèmes commencent. Bien que la fenêtre contextuelle ait 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 :
Option 1 - recherchez une opportunité de positionner la fenêtre non pas par rapport à main, mais par rapport à un autre élément enfant situé dans 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 :
- étirer le bloc principal sur toute la hauteur de l'écran
- réserver de l'espace pour le sous-sol
- par rapport au bloc principal, positionner le sous-sol tout en bas en utilisant le positionnement absolu
Html, body ( hauteur : 100 % ; ) .main ( hauteur min : 100 % ; position : relative ; /* pour que les éléments enfants soient positionnés par rapport à ce bloc */ ) .footer ( hauteur : 50 px ; 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.
- Didacticiel
Tous ceux qui sont habitués aux pages de sites Web entièrement conçues préfèrent l’apparence de quelque chose de « cloué » (collant) au bas du pied de page. Mais il y a deux problèmes sur Internet : des champs de saisie qui ne s'agrandissent pas vers le bas et des pieds de page qui ne sont pas cloués (en bas de la fenêtre). Par exemple, lorsque l'on ouvre des pages de faible hauteur, on remarque immédiatement que les informations destinées à figurer en bas de la fenêtre de visualisation collent au contenu et se situent quelque part au milieu, voire en haut de la fenêtre. fenêtre, lorsque le fond est vide.
Donc au lieu de .
Ce guide destiné aux concepteurs de mise en page débutants montrera comment créer un pied de page « cloué » en 45 minutes, corrigeant les défauts d'une publication même aussi respectée que Habr, et rivalisant avec elle dans la qualité d'exécution de votre projet prometteur.
Examinons la mise en œuvre d'un type de pied de page cloué, extrait du réseau, et essayons de comprendre ce qui se passe. css-tricks.com/snippets/css/sticky-footer
CSS :
* ( margin:0; padding:0; ) html, body, #wrap ( height : 100%; ) body > #wrap (hauteur : auto ; min-height : 100%;) #main ( padding-bottom : 150px; ) /* doit avoir la même hauteur que le pied de page */ #footer ( position: relative; margin-top: -150px; /* valeur négative de la hauteur du pied de page */ height: 150px; clear:both;) /* CLEAR FIX* / .clearfix:after (contenu : "."; affichage : bloc ; hauteur : 0 ; clair : les deux ; visibilité : caché ;) .clearfix (affichage : bloc en ligne ;) /* Se cache depuis IE-mac \*/ * html .clearfix (hauteur : 1% ;).clearfix (affichage : bloc ;) /* Fin du masquage depuis IE-mac */
HTML :
Commençons par la théorie
L'implémentation habituelle d'un pied de page cloué repose sur la propriété CSS2 unique selon laquelle les éléments sont les enfants immédiats de CORPS- maintenir le pourcentage de hauteur ( hauteur:100% ou autre) par rapport à la fenêtre, si tous leurs parents ont le même pourcentage de hauteur, à partir de la balise HTML. Auparavant, sans doctypes, mais désormais en mode Quirks, les hauteurs en pourcentage des éléments sont prises en charge à n'importe quel niveau, et dans les doctypes modernes - uniquement dans les éléments définis en pourcentage. Par conséquent, si nous créons un bloc de contenu (appelons-le #mise en page) ayant une hauteur de 100%, il défilera comme s'il s'agissait d'une fenêtre. Tout le contenu (en streaming) y est placé, à l'exception du pied de page et peut-être de l'en-tête.Le pied de page est placé après ce bloc et reçoit 0 pixel de hauteur. En général, vous pouvez suivre #mise en page placez autant de blocs que vous le souhaitez, mais ils doivent tous avoir une hauteur de 0 pixel ou être en dehors du flux du document (pas position : statique). Et il existe une autre astuce importante qui est habituellement utilisée. Il n'est pas nécessaire de rendre la hauteur égale à 0. Vous pouvez rendre la hauteur fixe, mais soustrayez-la du bloc principal en utilisant la propriété marge inférieure : -(hauteur) ;.
En termes humains, les styles créent une « poche » vide en bas, dans laquelle le pied de page est inséré, et il finit toujours soit collé au bord inférieur de la fenêtre, soit au bord inférieur du document, si la hauteur de le document est plus grand que la hauteur de la fenêtre. Il existe de nombreuses implémentations de pieds de page sur Internet, avec plus ou moins de succès dans tous les navigateurs. Continuons à le construire nous-mêmes, en utilisant la mise en page de Habr comme « bête de somme ».
Parce que le bas du bloc #mise en page- c'est une poche, pour le pied de page elle doit être vide, sans afficher les objets de la page. Et ici nous nous heurtons à une autre limite : nous ne pouvons pas créer une poche vide au détriment de rembourrage V #mise en page, car alors il deviendra supérieur à 100 %. Cela ne te sauvera pas non plus marge- le vide doit être créé en utilisant les propriétés des éléments imbriqués. De plus, il faut s'assurer que les éléments flottants ne rampent pas sous la bordure du bloc, ce qui est fait par exemple par le bloc.
Regardons la structure des pages de notre sujet de test. Le moyen le plus simple de procéder consiste à ouvrir la fenêtre Firebug ou une fenêtre similaire (Outils de développement (Ctrl-F12)) dans Chrome.
Passons à un exemple fonctionnel
Lesquels voyons-nous ? défauts de mise en page en termes de mise en œuvre de l'effet d'un pied de page cloué ? On voit ça1) Le pied de page du site est situé à l'intérieur d'un bloc avec id=layout, qui n'a pas de pourcentage de hauteur. Selon la théorie, lui, les parents et le contenu block.content-left doivent régler la hauteur à 100 %. Des problèmes surviennent avec ce dernier - il ne convient pas à cela. Par conséquent, il manque un bloc intercalaire ou le pied de page n'est pas au bon niveau. En plus,
2) La hauteur du pied de page est variable (en fonction du nombre d'éléments dans la liste et de la taille de la police, cela se voit non pas à partir du HTML, mais à partir du CSS). ET
3) au-dessus de #mise en page il y a un bloc publicitaire d'une hauteur fixe de 90px ;
4) il n'y a pas de blocs d'alignement ni dans le pied de page ni (d'une manière générale) dans le bloc #mise en page(oui, mais au dessus du bloc .rotated_posts; cependant, il devrait peut-être être classé comme pied de page).
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 depuis bloc publicitaire - 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 en utilisant 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 « inséré » le pied de page dans le contenu, nous laisserons cette idée de côté. placement correct pied de page de votre futur site Web (qui sera donc « plus cool » que Habr !), et nous disséquons Habr en utilisant javascript (userscript) jusqu'au bon état. (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 vers les 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. Tu peux essayer de faire joli visage", mais avec un "mauvais jeu" ? Pour quoi? " Mauvais jeu" le 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 " bon jeu"sur votre projet.
if(foot)( //bloc-aligner
Ici nous nous sommes permis d'utiliser une fonction auto-écrite h.apnd_el, ce 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 d'implémentation typique Règles CSS - h.addRules. Ici, vous ne pouvez pas vous en passer, car vous devez déclarer une règle avec " !important" - précisément à cause des particularités des priorités de styles du script utilisateur.
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 d'avoir un pied de page cloué. CSS pur- 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, en regardant l'acceptabilité de la solution proposée dans le script utilisateur sur différentes plateformes, réalisez une pose calculée de 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
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 utilisateur ZenComment sont compatibles avec les scripts, mais pour bon fonctionnement pied de page cloué avec eux, vous devez installer la version ZenComment 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 scripts utilisateur et sans réorganisation des blocs, les résultats seront différents. C’est ce qu’ont donné les expériences d’implémentation dans le script utilisateur.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 plan de travail tout à fait réalisable, au moins pour une exécution rapide. ordinateurs de bureau. 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 ?
Sur un site Web standard, sans styles d'utilisateur, même les pages de questions et réponses courtes s'avèrent plus longues que 1 500 px, ce qui est dans la plupart des cas imperceptible avec les moniteurs horizontaux. Mais même avec des moniteurs ordinaires, vous rencontrez souvent des pages utilisateur personnelles d'une hauteur d'environ 1 300 pixels, où le pied de page non attaché apparaît dans toute sa splendeur. Le nombre de pages dans les paramètres utilisateur n'est pas non plus très long.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 utilisateurs (« 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. 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.
Je me souviens qu'au moment où j'ai commencé à passer des tables à la disposition div, l'une des difficultés que j'ai rencontrées était la suivante - comment pousser le pied de page du site tout en bas de la fenêtre du navigateur, de sorte que la page apparaisse allongée sur toute sa hauteur, quel que soit le volume du texte, et si la hauteur de la page est supérieure à la hauteur de la fenêtre du navigateur (lorsqu'un défilement apparaît), le pied de page restera à sa place.
Si, à l'aide de tableaux, ce problème est résolu uniquement en spécifiant la hauteur du tableau et/ou de la cellule qui y est imbriquée, alors lorsque en utilisant CSS la disposition des blocs utilise une approche complètement différente.
Au cours de la pratique, j'ai identifié par moi-même 5 façons de pousser le pied de page vers le bas de la fenêtre du navigateur avec en utilisant CSS .
Le code HTML de toutes les méthodes présentées a la structure suivante (la seule différence est le code CSS) :
Le code CSS ci-dessous inclut uniquement les propriétés minimalement requises pour l'implémentation. méthode appropriée. Pour chacun d’eux, vous pouvez voir un exemple en direct.
Première façon
Le pied de page est pressé par son positionnement absolu et en étirant la hauteur des blocs parents (html, body et .wrapper) à 100 %. Dans ce cas, le contenu block.content doit spécifier une marge inférieure égale ou supérieure à la hauteur du pied de page, sinon le pied de page couvrira une partie du contenu.
* ( marge : 0 ; remplissage : 0 ; ) html, corps ( hauteur : 100 % ; ) .wrapper ( position : relative ; hauteur min : 100 % ; ) .content ( padding-bottom : 90px ; ) .footer ( position : absolu ; gauche : 0 ; bas : 0 ; largeur : 100 % ; hauteur : 80 px ; )
Deuxième façon
Le pied de page est enfoncé en tirant le bloc de contenu et ses « parents » sur toute la hauteur de la fenêtre du navigateur et en soulevant le pied de page via une marge négative (marge supérieure) pour supprimer le défilement vertical qui apparaît. Dans ce cas, il est nécessaire d'indiquer la hauteur du sous-sol, et elle doit être égale à l'ampleur de l'indentation.
* ( marge : 0 ; remplissage : 0 ; ) html, corps, .wrapper ( hauteur : 100 % ; ) .content ( dimensionnement de la boîte : bordure-boîte ; hauteur min : 100 % ; remplissage-bas : 90 px ; ) . pied de page ( hauteur : 80px ; marge supérieure : -80px ; )
Grâce à la propriété box-sizing: border-box, nous empêchons la boîte de classe .content de dépasser 100% de hauteur. Autrement dit, dans ce cas, min-height : 100 % + padding-bottom : 90px équivaut à 100 % de la hauteur de la fenêtre du navigateur.
Troisième voie
C'est bien car, contrairement aux autres méthodes (sauf la 5ème), la hauteur du pied de page n'a pas d'importance.
* ( marge : 0 ; remplissage : 0 ; ) html, corps ( hauteur : 100 % ; ) .wrapper ( affichage : tableau ; hauteur : 100 % ; ) .content ( affichage : ligne du tableau ; hauteur : 100 % ; )
Ici, nous émulons le comportement d'une table en transformant le bloc .wrapper en table et le bloc .content en une ligne de tableau (affichage : table et affichage : propriétés de ligne de table respectivement). Grâce à cela, et au fait que le bloc .content et tous ses conteneurs parents sont définis à 100 % de hauteur, le contenu est étiré sur toute sa hauteur, moins la hauteur du pied de page, qui est déterminée automatiquement - l'émulation de table empêche le pied de page de s'étendre. au-delà de la hauteur de la fenêtre du navigateur.
En conséquence, le pied de page est enfoncé vers le bas.
Quatrième méthode
Cette méthode ne ressemble à aucune des précédentes, et sa particularité réside dans l'utilisation de la fonction CSS calc() et de l'unité de mesure vh, qui ne sont supportées que navigateurs modernes. Ici, vous devez connaître la hauteur exacte du sous-sol.
* ( marge : 0 ; remplissage : 0 ; ) .content ( hauteur min : calc(100vh - 80px); )
100vh est la hauteur de la fenêtre du navigateur et 80px est la hauteur du pied de page. Et en utilisant la fonction calc(), nous soustrayons la deuxième valeur de la première, appuyant ainsi le pied de page vers le bas.
