CSS allows to adjust the height of an element using the height property. While there are several units to specify the height of an element. The vh is a relative unit that is commonly used.
vh: It stands for viewport-height. The viewport refers to the browser window size. Thus when use vh as a unit, the element’s height is adjusted relative to the browser window (viewport’s) height.
vw: It stands for viewport-width. It is used to set the browser width 100% relative to the browser window (viewport’s) width.
Syntax: To set a div element height to 100% of the browser window, it can simply use the following property of CSS:
height:100vh;
Example:
<!DOCTYPE html> <!DOCTYPE html> <html> <head> <title>Make div 100% of height</title> <style> #geeks { height: 100vh; width: 100vw; font-size: 20px; font-family: Times; padding-top: 250px; 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">GeeksforGeeks</div> <div>A computer science portal for geeks</div> </div> </body> </html> |
Output:
leave a comment
0 Comments