Le nom des calques est header footer. Pied de page DIY cloué en bas
Cette balise peut être utilisée, comme les précédentes, plusieurs fois sur une page. Vous avez probablement déjà deviné d'après le nom qu'il s'agit du pied de page de la page. Il peut contenir des compteurs, du texte sur les droits d'auteur sur le site, des coordonnées, etc. Il est également possible d'insérer une barre de navigation () dans le pied de page. Personne n'interdit d'insérer de nouveaux éléments tels que des côtés et des sections, mais je ne le ferais toujours pas si j'étais vous.
Et
En-tête du site
Message n°1
Ici, nous écrirons le texte du premier message.
Message n°2
Ici, nous écrirons le texte du deuxième message.
Année, etc. La copie est interdite))
Le résultat devrait être le suivant :
quels que soient l’en-tête et le pied de page de la page du document. C'est dans de tels cas que ces éléments peuvent être utilisés plusieurs fois. Bien que je sois sûr qu'ils peuvent également être utilisés dans la barre latérale latérale.
Eh bien, maintenant vous vous êtes familiarisé avec les éléments structurels de base de HTML5, et dans les prochaines leçons, nous examinerons encore plus de nouveaux éléments, diverses formes qui n'étaient pas dans d'autres spécifications HTML !
Bonjour, chers lecteurs du site blog. Nous poursuivons le sujet de la disposition des blocs, qui a été abordé et poursuivi dans les trois articles précédents. En principe, nous avons déjà réussi à créer une mise en page de site à deux et trois colonnes, et nous avons même réussi à prendre en compte les nuances de la création d'une mise en page fluide.
De plus, dans les premiers articles sur la mise en page des sites Web (), certains concepts de base du webmastering ont été abordés, sans comprendre dont il serait assez difficile d'en comprendre les nuances.
Quels problèmes avons-nous rencontrés avec la mise en page de notre site Web ?
Aujourd'hui, nous allons essayer de résoudre un petit problème qui peut survenir avec la mise en page que nous avons créée précédemment. Le plus souvent, cette situation se produit lors de sa visualisation sur de grands moniteurs (à haute résolution) et lors de l'affichage d'une page contenant une petite quantité d'informations.
Pourtant, à mon avis, il est nécessaire d'appuyer sur le pied de page tout en bas de la mise en page du site, et cela sera particulièrement vrai dans le cas où la hauteur de la page est inférieure à la hauteur de l'écran de l'utilisateur. Cela peut être représenté schématiquement comme ceci :
Ceux. Le comportement correct du pied de page dans le cas d’une petite quantité d’informations sur la page et d’un grand écran utilisateur sera le suivant :
Pour implémenter cela, nous devons effectuer un certain nombre de manipulations avec le code de notre layout. De plus, nous apporterons des modifications non seulement au fichier de style CSS Style.css, mais également à Index.html, qui contient le code HTML et forme les blocs Div. Mais tout d’abord.
À titre d'exemple, nous utiliserons la présentation de site à trois colonnes que nous avons créée précédemment. Dans ce cas, Index.html ressemblera à ceci :
Et les propriétés CSS suivantes ont été écrites dans le fichier Style.css :
Corps, html ( margin:0px; padding:0px; ) #maket ( width:800px; margin:0 auto; ) #header( background-color:#C0C000; ) #left( background-color:#00C0C0; width:200px ; float:left; ) #right( width:200px; background-color:#FFFF00; float:right; ) #content( background-color:#8080FF; margin-left:202px; margin-right:202px; ) #footer ( couleur d'arrière-plan : #FFC0FF ; clair : les deux ; )
Eh bien, la mise en page elle-même ressemblait à ceci :
Comme vous pouvez le constater, le pied de page n'est pas enfoncé jusqu'en bas et ne répond donc pas à nos exigences (il est toujours situé sous la colonne la plus basse), nous devrons donc apporter des ajustements au code. La même chose peut être faite pour une mise en page à deux colonnes, ainsi que pour une mise en page en caoutchouc. La méthode est universelle.
Comment pousser le pied de page vers le bas de la mise en page du site Web
Nous devons donc déplacer le conteneur Div avec le pied de page vers le bas de l'écran. Pour ce faire, vous devrez d'abord définir la hauteur de la page entière à cent pour cent (elle occupera tout l'écran). Cela sera nécessaire pour ensuite modifier la taille du bloc principal avec la mise en page à 100 %.
L'intégralité du contenu de la page du site est placée dans les balises Body d'ouverture et de fermeture, et nous devons donc ajouter une autre propriété CSS pour la balise Body dans Style.css, en définissant la hauteur à 100 % :
Corps, html (marge:0px; padding:0px; hauteur: 100%; )
Cela n'affectera pas encore l'apparence, mais le blog principal peut désormais être étiré sur toute la hauteur de l'écran. Ceux. c'était une sorte d'étape préparatoire.
Propriétés CSS de base, si vous le souhaitez, vous pouvez les consulter. Maintenant, définissons le conteneur Div qui contient l'intégralité de notre mise en page à une hauteur minimale de 100 % :
Je veux aussi le mettre en évidence (div avec id="maket"). Pour ce faire, je vais lui donner un cadre en utilisant la propriété Border() correspondante :
La propriété border: solid 3px black permet de définir une bordure solide (solide) de 3 pixels d'épaisseur en noir pour ce conteneur. Cela vous permettra de voir clairement que le conteneur avec la mise en page s'est étendu sur toute la hauteur de l'écran, même avec une petite quantité d'informations sur la page :
Nous devrons maintenant retirer le bloc de pied de page du conteneur général et le placer en dessous, immédiatement après le bloc général. Qu'est-ce que cela va donner ? Et le fait que, finalement, le pied de page de la mise en page daignera descendre, et ne sera pas, comme auparavant, plaqué contre sa colonne la plus longue. Dans ce cas, Index.html ressemblera à ceci :
Veuillez noter que le bloc avec le pied de page n'est plus situé à l'intérieur du conteneur général (maket), et donc sa largeur n'est plus régulée par les propriétés CSS spécifiées pour maket dans le fichier Style.css. La largeur du pied de page s'étendra sur tout l'écran, mais il sera toujours situé en bas de l'écran, juste en dessous du bloc principal :
Mais encore une fois un problème se pose, car pour voir le pied de page, il faut maintenant faire défiler l'écran dans le navigateur (voir la barre de défilement dans l'image ci-dessus).
Cela se produit parce que le conteneur principal (maket) occupe toute la hauteur de l'écran (cela est déterminé par la propriété min-height : 100 %), et le pied de page est situé immédiatement derrière lui et pour le voir, vous devrez faire défiler, ce qui n'est pas très pratique et fonctionnel.
Vous pouvez résoudre ce problème en définissant un remplissage négatif pour le conteneur Div avec le pied de page afin qu'il se déplace vers le haut d'une distance égale à sa hauteur. Dans ce cas, le conteneur de pied de page chevauchera le conteneur principal et s'adaptera à la hauteur de l'écran du navigateur (c'est-à-dire que vous n'aurez pas besoin de faire défiler pour l'afficher).
Mais pour définir un décalage négatif par rapport au haut, vous devez connaître cette hauteur même du pied de page, mais nous ne la savons pas encore.
Par conséquent, nous allons d’abord définir la hauteur du conteneur contenant le pied de page en définissant la propriété correspondante dans Style.css :
#footer( couleur d'arrière-plan :#FFC0FF ; clair : les deux ; hauteur : 50 px ; )
Et puis nous lui fixons une marge négative en haut à une hauteur égale à sa hauteur :
Cela permettra au pied de page de s'élever exactement à sa propre hauteur et ainsi de s'adapter à l'écran du navigateur (nous pouvons maintenant supprimer la propriété CSS border: solid 3px black de la règle maket, afin que l'épaisseur de la bordure n'empêche pas l'ensemble de notre disposition, y compris le pied de page, depuis l'ajustement dans la hauteur de l'écran) :
Comme vous pouvez le constater, la barre de défilement n'apparaît désormais plus dans le navigateur et l'intégralité de la mise en page de notre site, basée sur des blocs de trois colonnes, tient sur un seul écran (au cas où il y aurait peu d'informations sur la page) et comporte un pied de page situé tout en bas. . C’est exactement ce que nous devions faire.
Nous insérons l'espaceur et combattons Internet Explorer
Mais un problème survient, qui n'apparaîtra que lorsqu'il y aura plus d'informations sur la page de mise en page et la situation suivante peut se produire :
Il s'avère qu'une situation peut survenir lorsque les informations contenues dans l'une des colonnes de mise en page chevauchent le pied de page, ce qui n'aura pas l'air joli. Cela se produit à cause du rembourrage négatif notoire que nous avons défini et qui a contribué à élever notre sous-sol par rapport au conteneur de mise en page principal.
Ceux. Il s'avère qu'en bas de l'écran, il y a deux blocs qui se chevauchent dans le sous-sol.
La solution à ce problème consiste à ajouter un nouveau conteneur Div vide (appelé espaceurs) dans le conteneur principal de notre mise en page (maket), à l'endroit où se trouvait auparavant le bloc avec le pied de page.
En définissant ce nouveau conteneur à une hauteur égale à la hauteur du pied de page, nous pouvons éviter que les informations du conteneur principal n'entrent en collision avec le bloc avec le pied de page. Attribuons un ID () à ce conteneur appelé Rasporka et par conséquent l'Index.html de notre mise en page à trois colonnes ressemblera à :
Et dans Style.css, nous écrirons pour cela ( , qui définit la hauteur de ce conteneur d'espacement égale à la hauteur du sous-sol :
#rasporka ( hauteur : 50px ; )
En conséquence, le pied de page sera pressé par le bas non pas sur les informations contenues dans le conteneur principal (par exemple, le texte de la colonne la plus haute), mais sur une zone égale à la hauteur du pied de page avec un conteneur d'espacement ne contenant aucune information. .
De cette façon, nous évitons les collisions et les distorsions dans notre disposition à trois colonnes. Tout sera clair et beau (décent et noble) :
Comme je l'ai mentionné plus haut, la largeur du pied de page doit désormais être définie séparément, car... ce conteneur ne fait plus partie du conteneur principal. Pour ce faire, vous devez ajouter des propriétés supplémentaires pour le pied de page au fichier CSS, vous permettant de définir sa largeur et de l'aligner horizontalement au milieu de l'écran.
Il est logique de définir la largeur égale à la largeur de l'ensemble de la mise en page à l'aide de la propriété Largeur, et l'alignement horizontal peut être effectué de la même manière que nous l'avons fait pour l'ensemble de la mise en page sur une mise en page en bloc.
Ainsi, nous devrons ajouter des propriétés supplémentaires pour l’ID Footer :
#footer( background-color:#FFC0FF; clear:both; height: 20px; margin-top:-20px; width:800px; margin-left: auto; margin-right: auto; )
En utilisant la propriété width:800px, la largeur est définie sur 800 pixels, et en utilisant les deux propriétés margin-left: auto et margin-right: auto, l'indentation à gauche et à droite du pied de page est définie automatiquement, suite à lesquels ces retraits seront égaux et notre héros sera aligné au milieu :
Eh bien, il semble qu’il n’y ait plus rien à améliorer, mais ce n’était pas le cas. Comme toujours, notre navigateur préféré Internet Explorer 6 ne comprend pas quelque chose aux propriétés CSS que nous utilisons. Dans ce navigateur (et peut-être aussi dans d'autres anciens), malgré tous nos efforts, le pied de page ne sera pas pressé vers le bas, mais restera toujours collé à la colonne la plus haute de la mise en page du site.
Tout cela se produit parce que ( ne comprend pas la propriété min-height: 100%, que nous avons utilisée pour définir la hauteur minimale du bloc principal égale à la hauteur de l'écran.
Par conséquent, pour résoudre ce problème, nous devrons utiliser un soi-disant hack qui nous permet d'expliquer (sur nos doigts) aux navigateurs plus anciens quoi faire. Avant la liste des propriétés CSS pour maket vous devrez insérer la combinaison suivante :
* html #maket ( hauteur : 100 % ; )
Cette règle ne s'appliquera qu'au navigateur Internet Explorer 6 ; les autres n'en tiendront pas compte et ne l'implémenteront pas.
Ainsi, l'aspect final de Style.css avec le pied de page enfoncé en bas de l'écran sera le suivant :
Corps, html ( marge:0px; padding:0px; hauteur: 100%; ) * html #maket ( hauteur: 100%; ) #maket ( largeur:800px; marge:0 auto; hauteur min: 100%; ) # en-tête( couleur d'arrière-plan :#C0C000; ) #left( couleur d'arrière-plan :#00C0C0; largeur:200px; float:left; ) #right( largeur:200px; couleur d'arrière-plan:#FFFF00; float:right; ) #content ( couleur d'arrière-plan : #8080FF ; marge-gauche : 202 px ; marge-droite : 202 px ; ) #pied de page ( couleur d'arrière-plan : #FFC0FF ; clair : les deux ; hauteur : 50 px ; marge-haut : -50 px ; largeur : 800 px ; marge-gauche : auto ; marge-droite : auto ; ) #rasporka ( hauteur : 50px ; )
Eh bien, la forme finale d'Index.html a été donnée juste au-dessus. Ça y est, cette série d’articles consacrée à la mise en page en bloc des mises en page de sites Web fixes et fluides à 2 et 3 colonnes peut être considérée comme complète.
Vous pouvez également regarder la vidéo « Travailler avec la balise div HTML » :
Bonne chance à vous ! A bientôt sur les pages du site blog
Vous pourriez être intéressé
Disposition en blocs - Nous créons des mises en page à deux, trois colonnes et fluides pour le site 
Disposition DiV - Créez des blocs pour une mise en page à deux colonnes en HTML, déterminez leurs tailles et définissez leur positionnement en CSS
Si les chaussures sont le dernier élément de toute tenue, alors le pied de page d’un site de commerce électronique est le dernier élément de sa conception de vente. En se concentrant sur l’élément inférieur, le pied de page, les sites Web modernes sont prêts à mettre en valeur leur personnalité de toutes les manières possibles. Dans un environnement de commerce électronique compétitif, il existe suffisamment d’idées originales, de créativité et de tendances en matière de design. Avant de diversifier le footer d’un site E-commerce, il convient de considérer des points importants. Que faut-il placer en premier et quelle est la meilleure façon de le faire ? Notre sélection de modèles de pieds de page inspirants propose des options intéressantes.
Lire aussi : 13 tendances marketing du commerce électronique pour 2019
Statistiques intéressantes de Chartbeat. Une étude du comportement de 25 millions d’utilisateurs a montré à quel point ils parcourent les pages. Il s'avère que l'attention de l'utilisateur est attirée sur l'espace situé en dessous de la ligne de pliage. Recevant des informations plus pratiques, les visiteurs s'attardent le plus longtemps dans la zone de 1 200 px à partir du haut de la page (avec un écran vertical moyen de 700 px dans le navigateur) ou derrière le deuxième écran.
Durée d'affichage (sec.) / Distance depuis le haut de la page (pixels)
Il existe un écart important entre la durée de visualisation du premier et du deuxième écran. Le TOP est de 4 secondes, la durée atteint un maximum (16 secondes) à 1200 pixels du haut et, avec un défilement ultérieur, diminue lentement.
Part de visiteurs (%) / Distance depuis le haut de la page (pixels)
Une part importante des visiteurs (plus de 25 %) n'attendent même pas que le contenu se charge et commence à faire défiler la page. Cela signifie que seulement 75 % verront le sommet en premier. La zone la plus consultée de la page est de 550 pixels (juste au-dessus de la ligne de pliage).
L'étude dissipe le mythe selon lequel les utilisateurs ne font pas défiler la page jusqu'en bas et ne regardent pas tout le contenu. Le pied de page est également important pour un site de commerce électronique moderne et présente même des avantages.
Idées sur la façon de concevoir un « sous-sol » (pied de page), exemples de modèles de vente
Ces 10 conseils vous expliqueront comment concevoir magnifiquement le pied de page d'un site Web - selon les règles de composition en matière de conception Web et en résolvant les tâches prioritaires. Appliquez les tactiques les plus appropriées pour améliorer la convivialité, l’UX (expérience utilisateur) et même augmenter les ventes.
1. Informations requises
Traditionnellement, les questions organisationnelles et juridiques requises sont abordées dans le pied de page du site. Les notifications sont conçues avec un texte moins visible, ce qui libère d'autres zones des pages pour des éléments plus significatifs. Voici un exemple de liste à considérer :
- Avis de droits d'auteur
- Mentions légales
- Informations de facturation
- Avis relatif aux cookies
Le site Internet vendant le produit doit répondre aux exigences légales et fournir des informations sur la procédure et les délais de retour. Son emplacement dans le pied de page est pratique à la fois pour la ressource vendeuse et pour les visiteurs.
Exemple de pied de page : Yves Rocher
Boutique en ligne de la marque Yves Rocher : pied de page plein écran au design agréable de calques alternés. Informe sur l'entreprise, l'infrastructure du site de vente - du suivi des commandes à la politique des données personnelles. Il y a aussi des conseils sur l'utilisation du produit, des bonus, des promotions
Exemple de pied de page : Lumity
Les revendeurs de compléments alimentaires sont soumis à des exigences légales accrues. responsabilité. Il y a pas mal de choses qu'ils devraient/ne devraient pas dire sur leur site Web de vente. Les liens vers les informations juridiques sont mis en évidence en gras pour une meilleure visibilité.
Un pied de page avec une belle image d’arrière-plan s’intègre de manière très organique dans la conception globale du site. Il n’y a pas de frontière claire, le contenu lui-même sert de séparateur ;
Exemple de pied de page : Saddleback Leather Co
Un site Web de vente avec un magnifique design rétro d’en-tête et de pied de page. Garantie de 100 ans contre les défauts de matériaux et de finition. Les conditions de retour sont accompagnées de histoires intéressantes... tout n'est pas si triste avec les informations nécessaires sur le commerce électronique, il s'avère
2. Espace négatif – distance visuelle suffisante
Lorsque vous limitez le nombre de liens de pied de page, ne lésinez pas sur l'espace négatif - cela aura un effet étonnant sur la perception visuelle et améliorera la lisibilité. Règle générale: En maintenant une hiérarchie visuelle, les éléments centraux sont remarqués plus rapidement (peut être utilisé à votre avantage !).
Exemple de pied de page : QUAY AUSTRALIA
Avec un style minimaliste et un menu déroulant fixe, la boutique en ligne peut s'offrir un pied de page spacieux
Exemple de pied de page : Incase
À PROPOS grandes quantités l'espace micro-négatif (entre les petits éléments) peut s'exprimer ainsi : tant que toutes les informations nécessaires sont présentes, elles sont lisibles et rapidement perçues - tout va bien
Exemple de pied de page : Stumptown Coffee Roasters
Le pied de page spacieux d'un site de café est un excellent complément d'une composition de conception épurée, dans laquelle il y a beaucoup d'espace macro-négatif (« air » entre les sections/sections)
3. Dernier appel à l'action
Lire aussi : Plus de 30 exemples et idées pour concevoir des boutons d'action cible
Le design élégant du pied de page en dit long sur la ressource elle-même. Il est important de le noter : l’acheteur reste ici un peu plus longtemps que dans d’autres parties de la page. Une opportunité pratique pour un dernier appel à l’action supplémentaire. Il s'agit souvent d'un abonnement/newsletter, mais vous pouvez également lier un appel CTA à l'enregistrement d'un compte.
Exemple de pied de page : Greetabl
Greetabl a un bas de page au design modeste qui comprend un appel à s'abonner. Avec un minimum d'éléments, l'appel devient perceptible, et en harmonie avec le fond turquoise il se transforme en décoration du site
Exemple de pied de page : Ecwid
Joli design avec des appels à l'action en bas des pages. La structure du constructeur de site Web de vente est universelle. Il a été traduit en 35 langues pour son million de clients.
4. Chariot flottant – augmentant la disponibilité des fonctionnalités de vente
Accéder au panier depuis le bas du site est un excellent moyen d'améliorer la convivialité et les qualités de vente du site.
Exemple de pied de page : Limonadela
Le site de vente de l'entreprise de restauration est agréable à consulter et pratique pour l'acheteur
5. Navigation en pied de page
La partie inférieure du site est idéale pour les informations qui ne sont pas souvent consultées : sur l'entreprise, les conditions d'utilisation et la politique de confidentialité. Dans ce cas, la fonction du pied de page est de sauver tout le monde. Se sentant perdu dans l'environnement du commerce électronique, quelqu'un s'intéresse aux infrastructures magasin électronique, faisant instinctivement défiler plus loin...
L'espace négatif est essentiel à la lisibilité du contenu. De manière générale, le « footer » n’est pas destiné à la navigation, contrairement à un menu ou un plan de site. Dans de rares cas seulement, les sites de commerce électronique placent des catégories de produits individuelles dans le pied de page (
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 presser le pied de page en bas de la fenêtre du navigateur à l'aide de 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 qui sont minimalement nécessaires pour implémenter la méthode correspondante. Pour chacun d’eux, vous pouvez voir un exemple en direct.
Première façon
Le pied de page est enfoncé en le positionnant de manière absolue 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 ; largeur : 100 % ;
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 dans ce cas Il est nécessaire d'indiquer la hauteur du sous-sol, et elle doit être égale au montant 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 prises en charge que par les 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.
Vous pouvez découvrir quels navigateurs prennent en charge calc() et vh sur caniuse.com en utilisant les liens suivants : prise en charge de la fonction calc(), prise en charge des unités vh.
Cinquième méthode (la plus pertinente)
Ce meilleure façon de tous ceux présentés, cependant il ne fonctionne que dans navigateurs modernes. Comme dans la troisième méthode, la hauteur du pied de page n'a pas d'importance.
* ( marge : 0 ; remplissage : 0 ; ) html, corps ( hauteur : 100 % ; ) .wrapper ( affichage : flex ; flex-direction : colonne ; hauteur min : 100 % ; ) .content ( flex : 1 0 auto ; ) .footer ( flex: 0 0 auto; )
Vous pouvez en savoir plus sur la prise en charge par le navigateur de la propriété flex.
