How to give a div tag 100% height of the browser window using CSS Last Updated : 11 Jul, 2025 Summarize Comments Improve Suggest changes Share Like Article Like Report 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.UnitDescriptionvhAdjusts the element's size relative to the viewport's height.%Sets the size relative to the parent container's size, expressed as a percentage.Method 1 : Using 'vh' unitTo 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 : 100vh ;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">GeeksforGeeks</div> <div>A computer science portal for geeks</div> </div> </body> </html> Output:Method 2 : Using ' % ' unitIn this html and body tags are set to height: 100% to ensure that the entire browser window is taken up by the div tag. The div tag height class is applied to the div tag and also set to height: 100% to make it fill the entire height of the browser window.Syntax:.height { height: 100%;}Example 2: To give a div tag 100% height of the browser window we can also use % unit. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>div tag 100% height </title> <style> body { height: 100%; } * { margin: 0; padding: 0; background-color: rgb(15, 75, 33); } .height { line-height: 30px; height: 100%; text-align: center; color: rgb(255, 255, 255); } </style> </head> <body> <div class="height"> <h1> GeeksforGeeks !</h1> <br> <h2> Give a div tag 100% height of the browser window </h2> <h2> Learn Data Structure & Algorithm </h2> </div> </body> </html> Output: ConclusionIn summary, use height: 100vh; when you need an element to span the entire viewport height, such as for full-screen sections or background elements. On the other hand, height: 100%; is perfect for filling parent containers where the parent’s height is already defined. Both techniques are essential in responsive web design and can be combined for dynamic layouts. Comment More infoAdvertise with us Next Article How to make div not larger than its contents using CSS? N NAYONIKA Follow Improve Article Tags : CSS Similar Reads How to make div not larger than its contents using CSS? There are three ways to achieve this problem: By default case Using inline-block property Using fit-content property in width and height Default Case: In HTML div is by default fit to content inside it. The example goes like this: Example 1: html <!DOCTYPE html> <html lang = "en" 3 min read Building Tooltip using CSS A Tooltip provides users with additional information about an element when the mouse pointer hovers over it. For example, when a user hovers over a button labeled "GeeksForGeeks," additional information such as "A Computer Science Portal" can appear as a tooltip.Tooltip PositionsTooltips can be posi 7 min read How to Set Background Color Opacity without Affecting Text in CSS? Here are two approaches to set a background color with opacity in CSS without affecting the text.1. Using RGBA color valuesTo set the opacity only to the background color and not the text inside it we can use RGBA color values instead of the opacity property. Because using the opacity property can c 2 min read Transition shorthand with multiple properties in CSS? The transition shorthand in CSS allows specifying multiple properties for smooth transitions between different states or values. The transition property in CSS is used to create transitions in an element, enabling changes to occur smoothly over a specified duration. This article demonstrates how to 2 min read How to prevent line breaks in the list of items using CSS? The display:inline-block property is used to show an element in the inline-level block container. It converts the block of elements into an inline element. Use height and width property to set an inline element. The display property is used to prevent a line break of a list of items. Syntax: element 1 min read How to remove the space between inline-block elements? To remove space between inline-block elements in CSS, ensure no whitespace or line breaks exist in HTML between elements. Alternatively, set the font-size of the parent to 0 and reset for elements, or apply a negative margin to elements. This ensures elements align seamlessly without unwanted spacin 3 min read 6 Best CSS frameworks You should Know to design Attractive Websites If you want to speed up your website and development process, or want to add some classy designs to your website, then you're at the right place. Awesome new popups, speed, ultimate colors and themes are waiting for you. Front end development is the complete pack of creation and colors and have amaz 3 min read Space between two rows in a table using CSS The space between two rows in a table can be done using CSS border-spacing and border-collapse properties. The border-spacing property is used to set the spaces between cells of a table and border-collapse property is used to specify whether the border of the table is collapsed or not. The border-sp 1 min read What is the difference between display: inline and display: inline-block in CSS? The display property in CSS is a very useful and commonly used property that contains many values. The display property defines how an HTML element should be displayed on the webpage. The property also specifies the type of box used for an HTML element and how it should be laid out on the page. If w 4 min read How to Write a:hover in Inline CSS? The :hover pseudo-selector in CSS enables you to modify the style of elements when a user hovers their mouse over them. This selector is widely used to improve user experience by adding visual feedback on elements like buttons, links, images, or any interactive items on a webpage. For the :hover eff 2 min read Like