Comment définir la hauteur d’une DIV à 100% avec CSS

Si vous essayez de définir la hauteur d’une DIV à 100%, si vous utilisez la règle height: 100%; cela ne fonctionne pas, car le pourcentage (%) est une unité relative; la hauteur résultante dépend donc de la hauteur de la hauteur de l’élément parent.
 
 

Code source :
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Comment définir la hauteur d'une DIV à 100%</title>
		<style type="text/css">
			html, body {
				height: 100%;
				margin: 0px;
			}
			.wrapper {
				height: 100%;
				background: #f285a4;
			}
		</style>
	</head>
	<body>
		<div class="wrapper">La hauteur de cet élément DIV est égale à 100% de la hauteur de son élément parent.</div>
	</body>
</html>
Résultat
La hauteur de cet élément DIV est égale à 100% de la hauteur de son élément parent.

 

Partagez cet article

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *