Chaque concepteur de mise en page est tôt ou tard confronté à la nécessité de placer le pied de page d'un site Web en bas de la page. Il existe plusieurs façons sur Internet de résoudre ce problème. Je vais vous montrer quelques-uns d'entre eux que j'utilise moi-même dans la pratique.

Le balisage HTML le plus simple :

Méthode n°1

Le Footer est poussé vers le bas en le positionnant de manière absolue et en étirant la hauteur des blocs parents (html , body et wrapper) à 100 %. Dans ce cas, le bloc de contenu doit préciser une marge inférieure égale ou supérieure à la hauteur du pied de page, sinon celui-ci 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 ; )

Méthode n°2

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. Grâce à la propriété box-sizing: border-box, nous empêchons la boîte avec la classe de contenu 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.

* ( 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 ; )

Méthode n°3

Cette méthode est bonne car, contrairement aux autres méthodes (sauf la 5ème), la hauteur du pied de page n'a pas d'importance. Ici, nous émulons le comportement d'une table en transformant le bloc wrapper en table et le bloc de contenu en ligne de table (affichage : table et affichage : propriétés de ligne de table, respectivement). Grâce à cela, et au fait que le bloc de contenu 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à. la hauteur de la fenêtre du navigateur.

*( marge : 0 ; remplissage : 0 ; ) html, corps ( hauteur : 100 % ; ) .wrapper ( affichage : tableau ; hauteur : 100 % ; ) .content ( affichage : ligne de tableau ; hauteur : 100 % ; )

Méthode n°4

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 pied de page. 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.

* ( marge : 0 ; remplissage : 0 ; ) .content ( hauteur min : calc(100vh - 80px); )

Méthode n°5

Peut-être que ça La meilleure façon parmi tous ceux présentés, cependant, il ne fonctionne que dans les 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 : 100 % ; ) .content ( flex : 1 0 auto ; ) .footer (flex: 0 0 auto; )

Méthode n°6

Une bibliothèque entière pour différents cas (en utilisant Flexbox)

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.

Dans ce cas, il se peut que le pied de page ne soit pas appuyé contre le bas de l'écran, mais soit situé presque à sa hauteur moyenne, ce qui dans la plupart des cas aura l'air moche et peu esthétique.

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. comportement correct du pied de page dans le cas d'une petite quantité d'informations sur la page et grand écran l'utilisateur sera le suivant :

Pour implémenter cela, nous devons effectuer un certain nombre de manipulations avec le code de notre mise en page. 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 mise en page de site Web à 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 régler 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%; )

Sur apparence Cela n’aura aucun effet pour l’instant, 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 ça 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 le 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'intégralité 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élicat 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 au fichier CSS propriétés supplémentaires pour le pied de page, 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 la mise en page entière à 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 la mise en page entière 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'à 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 ; ) #footer ( 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 : 50 px ; )

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 Balise HTML div":

Bonne chance à toi! 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

Aujourd'hui, nous trouverons la solution finale et fiable à la question de savoir comment appuyer sur le pied de page jusqu'au bas de la page en utilisant CSS et HTML. Tirez le pied de page vers le bas de la page. Vous pouvez également utiliser cette méthode pour centrer le contenu au milieu de la page.

Afin d'appuyer sur le pied de page jusqu'au bas de la page, vous devez créer un structure HTML:

Une fois la structure de la page prête, nous procédons à la configuration du CSS.

Nous devons nous assurer que le code HTML et le corps occupent toute la hauteur de la page (hauteur plein écran). Et le bloc wrapper avait une hauteur d'écran minimale et le contenu l'étirait selon les besoins. Ensuite, nous devons appuyer sur le pied de page jusqu'au bas de la page ou jusqu'au bas de l'écran pour qu'il reste toujours en dessous du contenu, et s'il n'y a pas assez de contenu, le pied de page est enfoncé jusqu'au bas de l'écran. Le contenu doit également être mis en retrait en bas pour un pied de page.

Appuyez sur le pied de page jusqu'au bas du code CSS de l'écran :

Cette méthode ne fonctionne que si le pied de page est corrigé. Cela signifie qu'il sera plus difficile d'appuyer sur le pied de page jusqu'en bas de la page si sa hauteur est dynamique, puisqu'il faudra fournir la marge inférieure correcte pour le div avec la classe principale. Ici, vous aurez déjà besoin de javascript et vous aurez besoin d'informations.

Dans la plupart des cas, le pied de page en bas de page a une hauteur fixe, cette méthode fonctionne donc sans problème.

Si vous connaissez un moyen plus simple ou trouvez des erreurs dans cette méthode, inscrivez-vous et écrivez des commentaires. Ensemble, nous rechercherons la manière idéale de relier le pied de page au bas de la page.

Il n'y a pas si longtemps, on m'a demandé de montrer comment appuyer le pied de page vers le bas. Un problème similaire se pose uniquement dans disposition des blocs. Et malheureusement option optimale non, mais dans cet article je vais montrer comment j'appuie sur le pied de page vers le bas Je conçois des sites Web.

Disons qu'il y en a un Code HTML:

À appuyez sur le pied de page vers le bas, doit être appliqué à cela Code HTML suivant Code CSS:

HTML(
hauteur : 100 % ;
}
corps (
hauteur : auto !important; //Obligatoire s'il y a beaucoup de contenu dans main
hauteur : 100 % ;
hauteur minimale : 100 % ;
}
#principal (
rembourrage inférieur : 50 px ;
}
#bas de page (
bas : 0 ;
hauteur : 50px ;
position : absolue ;
}

Tout est transparent ici, mais je dirai juste que la ligne « hauteur : auto !important;" permet de prendre en compte que si le contenu dans principal sera supérieure à la hauteur de la page, alors la hauteur sera supérieure à 100% . Sans cela, le pied de page s’ajustera simplement sur le contenu et sera toujours au même endroit.

Malheureusement, la solution n’est pas très belle, mais d’autres, à mon avis, sont encore pires. En général, lorsqu’il y a peu de contenu, je laisse simplement la couleur de fond du site en bas. Mais parfois le client demande encore pousser le sous-sol vers le bas, puis j'utilise la méthode décrite dans cet article.

Très souvent, il est nécessaire de pousser le pied de page vers le bas de la page, même si la hauteur du contenu du site est inférieure à la hauteur de l'écran. Des propriétés aussi merveilleuses que la position et le fond nous y aideront.

À première vue, la tâche est très simple : il suffit de placer un div en bas de la page. Cependant, il convient de considérer que le contenu du contenu peut être inférieur à une page.

Commençons par le plus simple, disons que nous avons