CATALOGUE Code & Data Formation XHTML/CSS Maîtrisez les Flexbox CSS - La mise en page responsive Créer une Application Web avec HTML et CSS Flexbox

Créer une Application Web avec HTML et CSS Flexbox

Un layout pour navigation mobile avec header et footer fixes
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Maîtrisez les Flexbox CSS - La mise en page responsive
Revoir le teaser Je m'abonne
4,3
Transcription
Cette leçon fait partie de la formation
24,90€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm
DescriptionProgrammeAvis
4,3
Cette leçon fait partie de la formation
24,90€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

Anatomie d'une Page Web Fixe

Objectifs

Les objectifs de cette vidéo sont :
- Apprendre à utiliser CSS Flexbox pour la mise en page.
- Comprendre comment fixer des éléments HTML en haut et en bas de la page.
- Savoir utiliser les unités de viewport (vh) pour la mise en page.

Résumé

Apprenez à créer une page web avec un header fixe en haut et un footer fixe en bas utilisant HTML et CSS flex.

Description

Dans cette leçon, nous allons créer une page web en utilisant HTML et CSS Flexbox pour obtenir une mise en page similaire à une application mobile. Nous commencerons par définir un header et un footer qui resteront fixes respectivement en haut et en bas de la page. Ensuite, nous ajouterons un article avec beaucoup de texte pour permettre le scrolling du contenu.

Nous utiliserons les propriétés CSS suivantes : vh pour la hauteur de la section body, flex pour la disposition et space-between pour espacer les éléments. Enfin, nous verrons comment définir des propriétés comme background, height, et overflow pour styliser nos éléments HTML.

Voir plus

Questions fréquentes

Quelle propriété CSS est utilisée pour fixer le footer en bas de la page?
La propriété justify-content: space-between dans un conteneur Flexbox est utilisée pour espacer le header et le footer en haut et en bas de la page de la page.
Quel est l’intérêt d’utiliser des unités vh pour la hauteur?
Les unités vh représentent un pourcentage de la hauteur de la fenêtre du navigateur, ce qui permet d’adapter automatiquement les éléments à toutes les tailles d’écran.
Que se passe-t-il si vous définissez overflow: auto au lieu de overflow: scroll sur l’article?
L’utilisation de overflow: auto permet un scroll vertical sans afficher un scroll horizontal, ce qui est souvent l'effet désiré pour les sections principales de contenu.
4 commentaires
4,3
4 votes
5
4
3
2
1
ericfreget_1
Il y a 2 mois
Formation très claire.
Par contre je suis déçu qu’aucun exemple incluant la gestion des images ne soit donné pour qu’elles se redimensionnent automatiquement.
M@d
Il y a 1 an
Très bonne formation dans l'ensemble. J'ai rencontré un problème d'affichage sur la partie consacrée à la navigation mobile avec header et footer fixe. En effet, j'ai suivi à la lettre vos instructions, mais lorsque je valide dans mon fichier app.css la ligne de code suivante le texte de mon article disparaît :

flex: 1 1 0px;

Et lorsque je supprime cette ligne de code et bien le texte de l'article réapparaît, mais le header ne reste pas figer lorsque je scrolle.

Je ne comprends pas trop d'où pourrais venir le problème. Je tacherais de recommencer pour trouver la solution.
benedicte.bertran
Il y a 3 ans
Explications pas à pas, simple, merci.
alain_nogues
Il y a 4 ans
Très bon pédagogue
Explications claires