Admin/Dev

27
Mars
2020

Astuce HTML/CSS : Créer un div fixé, avec une hauteur de 100%

Publié par sky

Voici une astuce en HTML et CSS très simple pour créer un bloc div à largeur et hauteur 100%.

En indiquant une position fixée à un bloc div, ce même bloc perd certaines de ses propriétés. En particulier, il perd sa largeur de 100% (définie par l'attribut display:block par défaut sur un div). Mais il est possible de redéfinir cette propriété, très rapidement avec un simple width:100%.

Imaginons un bloc dont la classe est "monBloc", la classe CSS serait

.monBloc {position:fixed; left:0; width:100%;}

Pour définir une hauteur de 100%, il faut utiliser les spécifications d'un bloc utilisant une position fixée. Pour cela il suffit de le fixer en haut de la fenêtre

.monBloc {position:fixed; left:0; width:100%; top:0;}

Puis de le fixer, de la même manière, en bas de la fenêtre

.monBloc {position:fixed; left:0; width:100%; top:0; bottom:0;}

Le bloc s'étirera sur toute la hauteur.

A noter, qu'à la place de width:100%, on pourrait demander au bloc de s'étirer en largeur, comme nous l'avons fais pour la hauteur.

.monBloc {position:fixed; left:0; right:0; top:0; bottom:0;}

Il est ensuite très facile mettre en place un bord tournant si on le souhaite, par exemple de 50 pixels

.monBloc {position:fixed; left:50px; right:50px; top:50px; bottom:50px;}

Il est aussi possible de le définir en pourcentage, cependant, il ne sera pas possible d'obtenir une marge identique en hauteur et en largeur.

.monBloc {position:fixed; left:10%; right:10%; top:10%; bottom:10%;}
 
 
Commentaires
Aucun commentaire pour le moment.

 

Poster un commentaire
En postant sur skymac.org, je m'engage à être courtois et à ce que mon message soit pertinent avec le sujet de l'article.
En outre, j'accepte, sans condition, que mon message soit refusé et supprimé si ces règles ne sont pas appliquées.
Captcha indisponible
Pour valider le formulaire, vous devez confirmer que vous êtes bien une personne. Actuellement, la fonctionnalité est indisponible. Vous devez activer le service ReCaptcha dans le gestionnaire des cookies, et donc consentir à l'utilisation de ses cookies.
Ouvrir le panneau de gestion des cookies
Fermer le panneau
Ce site utilise des cookies pour assurer son bon fonctionnement. Il utilise aussi des cookies issues de services tiers permettant de proposer des fonctionnalités avancées. À tout moment, vous pouvez choisir quels services vous souhaitez activer ou refuser, afin de retirer votre consentement quant à l'utilisation des cookies.
 
Personnalisation des services
Vous êtes libre de choisir quels services vous souhaitez activer. En autorisant ces services tiers, vous acceptez le dépôt et la lecture de cookies et l'utilisation de technologies de suivi nécessaires à leur bon fonctionnement. En retirant votre consentement pour certains de ces services, certaines fonctionnalités du site peuvent ne plus fonctionner.
Navigation du site  En savoir plus
Le site écrit un cookie de session permettant son bon fonctionnement et aidant à la navigation. Il ne peut être désactivé.
Utilisation : 1 cookie, enregistre l'identifiant de la session.
Durée de vie : Le cookie est présent pendant toute la session sur le site. Il devient obsolète après 24 minutes d'inactivité.
Obligatoire
Popup Média
Afficher des vidéos depuis Yoube ou Dailymotion.
ReCaptcha  En savoir plus
Permet de valider que les visiteurs sont bien des humains lorsqu'ils valident des formulaires.
 
Tout accepter Tout refuser Gérer