How to Set the Height of a DIV to 100% with CSS

December 29, 2020 admin

In this tutorial, we are going to see how to set the height of a DIV to 100% with CSS. If you are trying to set the height of a DIV to 100%, if you are using the height: 100%; rule this does not work, because the percentage (%) is a relative unit; the resulting height, therefore, depends on the height of the parent element.

Source Code:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>How to Set the Height of a DIV to 100% with CSS</title>
		<style type="text/css">
			html, body {
				height: 100%;
				margin: 0px;
			}
			.wrapper {
				height: 100%;
				background: #f285a4;
			}
		</style>
	</head>
	<body>
		<div class="wrapper">The height of this DIV element is equal to 100% of the height of its parent element.</div>
	</body>
</html>