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

admin December 29, 2020October 10, 2021 0 Comments css div full width of screen, css div height 100 of parent, div height 100 not working, div height: 100% of parent, how to make height 100 css, how to set div height based on screen resolution, how to set the height of a div to 100 using css, set div height to window height css

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>

Result
The height of this DIV element is equal to 100% of the height of its parent element.

Source Code:

You May Also Like

How to add shadow to text in CSS

Styling an input type=”file” button with CSS

How to change the color of HR tag with CSS

Leave a Reply Cancel reply