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