EN
CSS - make div element 100% height of the browser window
1 answers
0 points
How can I expand div element vertically depending on the user's browser window height?
I've tried height: 100% and min-height: 100% unsuccessfully.
1 answer
0 points
Quick solution:
xxxxxxxxxx1
div {2
height: 100vh;3
}If you want to set the height of an element to the 100% of the web browser window, you should also set the height of <body> and <html> to 100%.
Note:
Go to the documentation to read more about relative length units.
Practical example
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
div {7
height: 100vh;8
}9
10
</style>11
</head>12
<body>13
<div>This element will be 100% height</div>14
</body>15
</html>Explanation -
height: 100vhvsheight: 100%
height: 100vhmeans 100% of the viewport height,height: 100%means 100% of the parent's element height.That's why you need to use
height: 100vhon the element or addheight: 100%onhtmlandbody, as they don't have a size by default.
References
0 commentsShow commentsAdd comment
