Positionner le FOOTER en bas de page

**Artemus24** · 06/03/2023, 05h20

Salut à tous.

Je bidouille un peu en html et css, mais je ne maitrise pas trop mon sujet, sauf pour faire des choses simples.

J'aimerai positionner mon pied de page (footer) vis-à-vis de la fenêtre en fonction de la hauteur du corps de ma page (main).

Si le corps de ma page (main) est plus petit que la hauteur de la fenêtre, coller le pied de page (footer) au bas de la fenêtre. Dans le cas contraire, coller le pied de page (footer) au bas du corps de la page (main).

Séparément, je sais le faire, mais pas quand ils sont liés.

Cordialement.
Atemus24.
@+

**NoSmoking** · 06/03/2023, 09h27

Bonjour,
de nos jours on peut faire simple avec le positionnement GRID.

Sur base du HTML de base :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<body>
  <header>
    <h1>Titre header</h1>
  </header>
  <main>
    <section>
      <h2>Titre section</h2>
      <p>Texte paragraphe ...</p>
    </section>
  </main>
  <footer>
    <p>Footer</p>
  </footer>
</body>

et en appliquant le CSS minimum suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
body {
  display: grid;
  grid-template-rows: auto 1fr auto; /* (1fr) la ligne centrale prend la place restante */
  min-height: 100vh;
}
/* juste pour voir les zones */
header  { background-color: #EFD;}
main    { background-color: #DEF;}
footer  { background-color: #FDE;}

**Artemus24** · 06/03/2023, 10h14

Salut NoSmoking.

Bravo pour ton exemple, NoSmoking.

J'ai testé sous WampServer et j'ai même vérifié en appuyant sur la touche F11 de mon clavier.
Le footer reste bien à la même position quand la fenêtre est réajustée. Ca fonctionne parfaitement.

Je connaissais le "min-height" mais pas cette valeur "100vh".
C'est 100% vertical height.

Merci !

Cordialement.
Artemus24.
@+

**Artemus24** · 06/03/2023, 18h48

Salut NoSmoking.

Le sujet n'est pas terminé ! Je ne vois pas pourquoi il devrait être mis à résolu.

Je ne connaissais pas les grid ccs et j'ai donc consulté le net afin de savoir ce qui est possible de faire.
Que ce soit "grid-template-row" ou "grid-template-column", je n'ai rien compris des exemples données sur le net

Je prends comme exemple : "grid-template-columns: repeat(3, 1fr);".
Et cet exemple de positionnement : "grid-column: 1 / 3;".

Or à l'affichage de la boîte, elle est positionnée sur la première ligne mais de la colonne 1 à la colonne 2.
Cela demande quelques explications car je ne trouve pas cela très logique.

Cordialement.
Artemus24.
@+

**mathieu** · 06/03/2023, 20h23

regardez déjà les 2 pages suivantes qui contiennent beaucoup de détails sur l'utilisation possible ainsi que des exemples visuels que je trouve très instructifs :
https://developer.mozilla.org/fr/doc...mplate-columns
https://developer.mozilla.org/fr/doc...SS/grid-column

**Artemus24** · 07/03/2023, 08h36

Salut Mathieu et merci pour ta participation.

Je suis en train de refaire mon site qui par ailleurs est ancien (plus de quinze ans) et les techniques de l'époque ne sont plus trop d'actualité.
Parfois je me servais du javascript, avec l'inconvenient d'avoir un mauvais affichage durant un bref instant.

La solution donnée par NoSmoking fonctionne bien, mais je me suis aperçu que ma façon de faire la mise en page était compliquée.
Une feuille de style par page sans lien avec les autres pages de mon site.
J'ai construit mon site web, en partant d'une première page que j'avais placé dans un répertoire.
Celui-ci contenait le document HTML, la feuille de styles et le script Javascript.
Quand je créais une nouvelle page, je dupliquais le répertoire et je l'adaptais à mes besoins.
J'ajoutais des images, et des exemples pour les utilisateurs, qu'ils pouvaient récupérer chez eux.

D'où l'inconvénient de ne pas retrouver au même endroit, le menu, ou la fameuse balise <footer>, d'une page à l'autre.
Je sais, ce sont des erreurs de débutant dans l'art du HTML et du CSS.

Je me suis plus concentré sur Apache et MySql que sur le HTML et le CSS durant ces dernières années.
Franchement, je ne suis pas du tout doué pour la mise en forme des pages web.

Envoyé par Mathieu

regardez déjà les 2 pages suivantes qui contiennent beaucoup de détails sur l'utilisation possible ainsi que des exemples visuels que je trouve très instructifs :

Je les avais déjà consultées, mais cela ne m'a pas aidées du tout.
Les exemples ne sont pas intuitifs, voire même abscons, en ce qui me concerne.
Je reconnais qu'il y a des exemples, mais aucune explication sur la syntaxe utilisé et le résultat produit. Il faut deviner.

Je ne sais même pas si ces propriétés CSS sont celles dont j'ai besoin pour faire de nouvelles mise en page.

Je désire créer un modèle pour les différents types de mises en page que je vais utiliser.
Disons un modèle fourre tout, pour tous les cas que je vais avoir.
Aller au plus simple. Je ne sais pas si c'est la bonne façon de procéder.

Il y a la balise <header>, prenant toute la largeur de la page, et va contenir le titre de la page, ainsi qu'un menu horizontal sous forme de boutons.
Le titre sera centré en gros caractères, et à droite en plus petits caractères, sur la même ligne, le mois et l'année de la rédaction de la page.
Quand on consulte une page, on ignore sa date de rédaction. C'est pourtant utile de connaitre cela.

Il y a aussi la balise <footer> que je désirais positionner au bas de la fenêtre si le conteneur au centre n'occupait pas la totalité de la hauteur de la page.
Dans le cas contraire, cette balise <footer> serait collée au bas de la page. J'ai repris le code de NoSmocking sans trop me poser de question et ça fonctionne.
Sauf qu'après avoir fait des recherches sur le net, je n'ai rien compris de sa syntaxe.

Au milieu, je vais utiliser la balise <main> qui va me servir de conteneur.
Jusqu'à présent, j'utilisais la propriété CSS "float" pour me positionner à gauche ou à droite à partir d'un conteneur.
Et je faisais un grand usage de la balise <div> avant l'arrivée du html 5.
De même, j'utilisais des tailles en pixels et non en pourcentage.

Depuis le html 5, pour me positionner dans le conteneur, j'utilise les balises :
--> <nav>, à gauche en tant que conteneur de liens.
--> <aside>, à droite, que je redécoupais selon la présentation choisie.

Pas simple de faire une mise en page qui fonctionne parfaitement sur tous les navigateurs.
Depuis, il y a le "responsive web" pour les utilisateurs des smartphones, ce qui complique encore plus la mise en page.
Il y a aussi le redimensionnement des pages en fonction de la taille des écrans d'un PC.
Et je ne parle même pas de l'accessibilité aux malvoyants ou aux daltoniens.
Mon site web doit être accessible à tout le monde, aller au plus simple, avec une présentation minimaliste.

Je cherche avant tout des conseils sur comment bien procéder dans la mise en page selon des normes que je ne maitrise pas.
Je ne suis pas du tout doué pour tout ce qui est esthétique, comme le choix de belles couleurs harmonieuses.
Ce n'est pas mon métier et ce n'est que pour mon site web personnel, rien de plus.
Que de l'HTML et du CSS, pas de Javascript et encore moins du Jquery.

J'avais déjà bidouiller avec le HTML et le CSS au siècle dernier avec l'apparition de l'internet tout publique.
Comme je n'avais pas trop le temps de m'y consacrer sérieusement, j'ai remis cela à bien plus tard.

Je possède le livre de Raphaël Goetter (Alsacréations) "CSS avancées : Vers HTML5 et CSS3" dont j'ai fait l'acquisition à sa sortie en 2012.
Cela m'a aidé pour une meilleur compréhension du HTML et du CSS.
J'ai fait beaucoup d'exercices pour mieux comprendre les propriétés CSS.
J'avais déjà des problèmes dans la mise en forme des pages, surtout avec l'IE 6.0.
Cela fait plus de dix ans que je ne me suis pas remis à faire du web design.

Comment avec le GRID CSS faire de la bonne mise en page ?

J'ai consulté cette page qui me semble un peu plus clair au niveau des exemples.
Mais l'auteur donne des exemples disons cas d'école mais pas de vrais exemples.

J'ai pu découvrir ce que signifiait l'exemple que j'ai donné en consultant cette page.
--> "grid-template-columns: repeat(3, 1fr);".
Le "3" signifie 3 colonnes. pas contre, je n'ai pas compris ce que signifie ce "1fr".
Le "FR" signifie "fractional units". Parfois, je vois "2fr". Je pense que c'est le double du "1fr".
Ainsi "grid-template-columns: 1fr 2fr", cela signifie que le "1fr" a une largeur de 33% et le "2fr" une largeur de 66%.
"grid-template-columns: 1fr 2fr 1fr", le "1fr" a une largeur de 25% et le "2fr" une largeur de 50%".
Ce sont des tailles relatives et elles s'ajustent les unes par rapport aux autres.

J'ai vu aussi un "8ch". Pas trouvé sa signification.

--> "grid-column: 1 / 3". le "1" correspond à "min-width" et le "3" à "min-height".
Vu les exemples, je n'ai pas bien compris comme cela fonctionne.

Désolé pour la longueur, mais je suis un bavard. : )

Cordialement.
Artemus24.
@+

Positionner le FOOTER en bas de page

Positionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager