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:
- How to overlay one div over another div using CSS
- How to place two div side-by-side of the same height using CSS?
- How to make div height expand with its content using CSS ?
- Display div element on hovering over <a> tag using CSS
- How to copy the content of a div into another div using jQuery ?
- How to get the size of screen, current web page and browser window using jQuery?
- HTML width/height Attribute vs CSS width/height Property
- How to center a div within another div?
- How to clear all div's content inside a parent div ?
- How to animate div width and height on mouse hover using jQuery ?
- How to Set full height in box-inner div using bootstrap 4 ?
- How to dynamically get the content height of a div using AngularJS ?
- How to dynamically set the height and width of a div element using jQuery ?
- How to give text or an image transparent background using CSS?
- How to make flexbox children 100% height of their parent using CSS?
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.