How to Set Viewport Height & Width in CSS ? Last Updated : 02 Aug, 2024 Comments Improve Suggest changes Like Article Like Report Set viewport height and width in CSS is essential for creating responsive and visually appealing web designs. We'll explore the concepts of setting viewport height and width by using various methods like CSS Units, Viewport-Relative Units, and keyframe Media Queries.Table of ContentSetting viewport height and width using CSS UnitsSetting viewport height and width using Viewport-Relative UnitsSetting viewport height and width using CSS Media QueriesSetting viewport height and width using CSS UnitsCSS units such as pixels (px), percentages (%), and ems (em) allow to specify fixed or relative dimensions for elements based on the viewport size. Example: Setting viewport height and width using CSS Units. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Using CSS Units</title> <style> .container { text-align: center; } .box { height: 200px; margin: 20px auto; text-align: center; } .px-div { background-color: #ff0000; width: 300px; } .percent-div { background-color: #00ff00; width: 20%; } .em-div { background-color: #0000ff; width: 20em; } </style> </head> <body> <h3 class="container"> Setting viewport height and width using CSS Units </h3> <div class="box px-div"> Setting viewport height and width using Px </div> <div class="box percent-div"> Setting viewport height and width using % </div> <div class="box em-div"> Setting viewport height and width using em </div> </body> </html> Output:OutputSetting viewport height and width using Viewport-Relative UnitsThis approach ensures that elements scale proportionally with the viewport, offering a flexible and intuitive way to create responsive layouts. Viewport-relative units, including vh (viewport height) and vw (viewport width), enable developers to define element dimensions relative to the size of the viewport.Example: Setting viewport height and width using Viewport-Relative Units. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Setting viewport height and width using Viewport-Relative Units </title> <style> body, html { height: 100%; margin: 0; display: flex; justify-content: center; align-items: flex-start; } .container { margin-top: 20px; } .box { width: 50vw; height: 50vh; background-color: #ff0000; } h3 { text-align: center; } </style> </head> <body> <div class="container"> <h3>Setting viewport height and width using Viewport-Relative Units </h3> <div class="box"></div> </div> </body> </html> Output:OutputSetting viewport height and width using CSS Media QueriesIn this approach, the .box element has a default height of 500px and adjusts to 50px on screens smaller than 768px using CSS media queries, demonstrating how to set viewport height and width dynamically based on screen size.Example: Setting viewport height and width using CSS Media Queries. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Media Queries</title> <style> .box { width: 80%; height: 500px; background-color: #0000ff; margin-left: 10vw; } @media screen and (max-width: 768px) { .box { height: 50px; } } h3 { text-align: center; } </style> </head> <body> <h3>Setting viewport height and width using CSS Media Queries </h3> <div class="box"></div> </body> </html> Output: Comment More infoAdvertise with us Next Article How to Set Viewport Height & Width in CSS ? D djsp2sbpd Follow Improve Article Tags : Web Technologies CSS CSS-Questions Similar Reads How to Fill the Height of the Viewport with Tailwind CSS ? Filling the height of the viewport with Tailwind CSS refers to creating a layout where an element occupies the full vertical space of the browser window. This approach is essential for building responsive designs that adapt to various screen sizes, enhancing user experience.Here we have some common 2 min read How to Set Table Cell Width & Height in HTML ? In HTML, we can control the width and height of table cells using various approaches. This article discusses different methods to set the width and height of table cells in HTML. Table of Content Using inline StyleUsing width and height attributesUsing Inline StyleIn this approach, we are using the 2 min read How to Set Calc Viewport Units Workaround in CSS ? In the HTML webpage, when applying values to the CSS properties, the calculations are performed by using calc() function. Syntax: element { // CSS property property : calc( expression) } Properties: The calc() function takes parameters in the form of a single expression. The value becomes the result 2 min read How does the SVG Viewbox & Viewport work in CSS ? SVG (Scalable Vector Graphics) is a format used to create graphics on the web that can scale without losing quality. Within SVG, two important concepts are the viewBox and viewPort, which play crucial roles in how SVG elements are displayed and scaled. Table of Content What is SVG ViewBox?What is SV 5 min read How to Set Width and Height of Span Element using CSS ? The <span> tag is used to apply styles or scripting to a specific part of text within a larger block of content. The <span> tag is an inline element, you may encounter scenarios where setting its width and height becomes necessary. This article explores various approaches to set the widt 2 min read Primer CSS Layout width and height Primer CSS is a free open-source CSS framework that is built with the GitHub design system to provide support to the broad spectrum of Github websites. It creates the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are ste 5 min read How to Set Width and Height of an Image using HTML? When adding images to a webpage, it's important to set their dimensions using the height and width attributes in HTML. Without these dimensions, the browser won't know how much space to reserve for the image, which can cause layout shifts that disrupt the viewing experience. Note: Always specify the 2 min read How to set Line Height in Percent using CSS? The line-height property in CSS is used to set the line height in percentage by using the line-height: percent; property. This percentage is calculated based on the element's font size, allowing for flexible spacing between lines of text relative to their size.Syntaxline-height: percent;Example 1: D 2 min read CSS Media Queries - max-width or max-height CSS media queries can help you apply various styles depending on the user's device or viewport properties. You may make responsive designs with them, which change to accommodate various screen sizes, orientations, and device capabilities.The @media rule in CSS is used to write media queries, which c 3 min read How to set height equal to dynamic width (CSS fluid layout)? To set an element's height equal to its dynamic width in a CSS fluid layout, you can use the padding-bottom trick or the aspect-ratio property.Padding-Bottom Trick: Set height: 0; and padding-bottom to a percentage relative to the width to achieve the desired aspect ratio.Aspect-Ratio Property: Appl 3 min read Like