How to use ‘vh’ unit In CSS
To make a <div> occupy 100% height of its parent container in CSS, set height: 100%;. This percentage-based approach ensures the <div> adjusts dynamically based on the parent’s height.
Syntax:
To set a div element height to 100% of the browser window, it can simply use the following property of CSS:
height : 100 vh ;
Example 1: Implementation to show how to give a div tag 100% height.
HTML
<!DOCTYPE html><html><head> <title>Make div 100% of height</title> <style> #geeks { height: 100vh; width: 100vw; font-size: 20px; margin: 0px; background-color: green; text-align: center; color: white; } .gfg { font-size: 40px; font-weight: bold; } </style></head><body> <div id="geeks"> <div class="gfg">w3wiki</div> <div>A computer science portal for geeks</div> </div></body></html> |
Output:
How to give a div tag 100% height of the browser window using CSS
CSS allows to adjustment of the height of an element using the height property. While there are several units to specify the height of an element. Set the height of a <div> to 100% of its parent container with height: 100%, or use height: 100vh; for a full viewport height, ensuring the <div> spans the entire browser window. Adjust as per your design preferences.
| Unit | Description |
|---|---|
| vh | Adjusts the element’s size relative to the viewport’s height. |
| % | Sets the size relative to the parent container’s size, expressed as a percentage. |
Table of Content
- Using vh unit
- Using ‘ % ‘ unit