Css viewport height

Tailwind CSS has revolutionized the way developers approach styling in web development, offering a utility-first framework that accelerates the design process.Among its myriad of classes, height utilities play a crucial role in crafting responsive and adaptive layouts. In this blog post, we'll delve deep into five essential Tailwind CSS height classes: h-lvh, h-dvh, h-min, h-max, and h-fit.Understanding these classes will empower you to create more dynamic and user-friendly interfaces.The Height Classes at a GlanceBefore we dive into each class, let's briefly outline what we'll cover:h-lvh: Large Viewport Heighth-dvh: Dynamic Viewport Heighth-min: Minimum Content Heighth-max: Maximum Content Heighth-fit: Fit Content Height1. h-lvh (Large Viewport Height)What is h-lvh?The h-lvh class utilizes the CSS unit lvh, which stands for Large Viewport Height. This unit represents 1% of the largest possible viewport height—the height when all dynamic UI elements (like address bars or navigation controls) are hidden.When to Use h-lvhConsistent Full-Screen Elements: Ideal for elements that need to cover the entire viewport consistently, regardless of any UI changes.Preventing Layout Shifts: Helps avoid unexpected shifts when UI elements appear or disappear, ensuring a stable layout.Example Usage This div maintains a consistent height of 100lvh. 2. h-dvh (Dynamic Viewport Height)What is h-dvh?The h-dvh class employs the CSS unit dvh, meaning Dynamic Viewport Height. This unit adjusts to 1% of the current viewport height, dynamically responding to changes like the appearance of virtual keyboards or browser UI elements.When to Use h-dvhResponsive Mobile Design: Essential for mobile layouts where the viewport height can change frequently.Dynamic Content Adjustment: Useful for elements that need to adapt in real-time to UI changes for better user experience.Example Usage This div adjusts its height dynamically with the viewport. 3. h-min (Minimum Content Height)What is h-min?The h-min class sets the element's height to min-content, shrinking it to the smallest size necessary to fit its

Media queries to offset them on mobile..decorative--1 { left: 0;}.decorative--2 { right: 0;}@media (max-width: 600px) { .decorative--1 { left: -8rem; } .decorative--2 { right: -8rem; }}While this works, we can use a media query-less solution with CSS clamp() function.@media (max-width: 600px) { .decorative--1 { left: clamp(-8rem, -10.909rem + 14.55vw, 0rem); } .decorative--2 { right: clamp(-8rem, -10.909rem + 14.55vw, 0rem); }}Let me dissect the above CSS to make it easier for you:What we want is to set the minimum left offset as -8rem, and the maximum value as 0rem.With that, we leave it to CSS clamp() to decide on the preferred value and respect the minimum and maximum values we set.I used this calculator to get the above clamp() numbers.DemoFluid hero heightRelated to the previous example, a hero section height can be different based on the viewport size. As a result, we tend to change that via a media query or by using viewport units..hero { min-height: 250px;}@media (min-width: 800px) { .hero { min-height: 500px; }}We can use a mix of fixed value and viewport units, but we need to be careful to not have a huge height on larger viewports, and then we need to set a max height..hero { min-height: calc(350px + 20vh);}@media (min-width: 2000px) { .hero { min-height: 600px; }}With CSS clamp(), we can set a minimum, preferred, and maximum height with only one CSS declaration..hero { min-height: clamp(250px, 50vmax, 500px);}When resizing the screen, you will notice that the height changes gradually based on the viewport width. In the example above, 50vmax means “50% of the viewport’s largest dimension.DemoLoading barThis example is inspired by this tweet from Andy Bell. I really like the use of CSS clamp() for this use case!The bar thumb is supposed to animate from the left to right and vice versa. In CSS, the thumb can be positioned absolutely to the left..loading-thumb { left: 0%;}To position the thumb to the far right, we can use left: 100% but this will introduce an issue. The thumb will blow out of the loading bar container..loading-thumb { left: 100%;}That is expected, because 100% in this context starts

{ height: 100vh; /* Takes the full height of the viewport */}This approach works well on desktop but can cause jarring behavior on mobile as the viewport height changes dynamically.The Fix:A common solution to this problem is using CSS custom properties and JavaScript to calculate and update the correct height dynamically. This ensures the height remains stable even when the viewport changes on mobile devices.// Calculate the real viewport height and set it as a custom propertyfunction updateVH() { let vh = window.innerHeight * 0.01; document.documentElement.style.setProperty('--vh', `${vh}px`);}window.addEventListener('resize', updateVH);updateVH(); // Call on initial loadThen, in your CSS, you can use this custom property:.hero { height: calc(var(--vh, 1vh) * 100); /* Uses the calculated viewport height */}This method ensures that your design remains consistent, even on mobile browsers with dynamic UI elements.Pitfall #2: Scrollbars and Viewport Width (VW)When working with VW units, another common issue is the presence of scrollbars. On some devices or browsers, vertical scrollbars take up space on the screen but are not accounted for in the viewport width. This can cause elements sized with VW to be slightly too wide, leading to unintended horizontal scrolling.The Problem:If you set an element’s width to 100vw, it will take up the entire width of the viewport, including the area occupied by a vertical scrollbar. This can push content slightly beyond the viewport, causing a horizontal scrollbar to appear.Example:.container { width: 100vw; /* Includes scrollbar width, causing overflow */}On browsers where scrollbars overlap the content (such as macOS browsers with hidden scrollbars), this may not be a problem. But on Windows or other platforms where scrollbars take up space, the container will be wider than the visible area, leading to horizontal scrolling.The Fix:To avoid this issue, use a combination of CSS and JavaScript to calculate the correct width, excluding the scrollbar. You can use 100% width instead of 100vw, or dynamically adjust the width to account for the scrollbar:.container { width: 100%; max-width: 100vw; /* Ensures no overflow even with scrollbars */}Alternatively, use JavaScript to calculate the difference between the viewport width and the scrollbar:function updateContainerWidth() { let vw = window.innerWidth - document.documentElement.clientWidth; document.documentElement.style.setProperty('--container-width', `${vw}px`);}window.addEventListener('resize', updateContainerWidth);updateContainerWidth();This approach gives you more precise control over the element’s width and prevents the appearance of unexpected scrollbars.Pitfall #3: Issues with Nested Flexbox and Viewport UnitsViewport units can also cause issues when combined with Flexbox layouts, particularly when flex containers are nested. In some cases, using VW

Maybe you discovered there is a problem with almost all browsers 🙂Viewport height vh unit doesnt work properly. Why ? Well because we usualy need Visible Viewport Height but what we get is current window viewport height. But ofcourse in most cases this is not exacly what we need. When we have some sticky header or moving header footer or gsap site this becomes a headache.This js fixes that. it adds –vh css variable for calculated 1% of the vh and then we can use this whereever we want.Load this script on all of your page.function setViewportHeight() {var vh = window.innerHeight * 0.01; document.documentElement.style.setProperty('--vh', `${vh}px`);}setViewportHeight();window.addEventListener('resize', setViewportHeight);This will add calculated real visible viewport height vh on your page;Now you can use this easily everywhere with css because it is just a simple css variable.For example if you need 100% vh visible vh for a section or container you can use this;calc(var(--vh, 1vh) * 100)or lets say you want to make 100% vh but 20px less this works nice when you want some border arounds padding ..etccalc(var(--vh, 1vh) * 100 - 20px)

Viewport در طراحی وب به بخش قابل مشاهده یک صفحه در مرورگر یا دستگاه کاربر گفته می‌شود و بسته به اندازه صفحه نمایش، متغیر است. واحدهای Viewport مانند vw، vh، vmin و vmax در CSS، امکان استفاده از اندازه‌های وابسته به Viewport را فراهم می‌کنند. این واحدها به خصوص در طراحی‌های واکنش‌گرا بسیار مفید هستند. در این مقاله، به معرفی Viewport و واحدهای مرتبط با آن می‌پردازیم و کاربردهای آن‌ها در CSS را بررسی می‌کنیم.آشنایی با ViewportViewport به ناحیه‌ای از صفحه اشاره دارد که کاربران می‌توانند بدون نیاز به اسکرول، مشاهده کنند. اندازه Viewport در دستگاه‌های مختلف (مانند دسکتاپ، تبلت و موبایل) متفاوت است و CSS قابلیت‌های مختلفی را برای تنظیم عناصر متناسب با اندازه Viewport فراهم می‌کند.به عنوان مثال: در دسکتاپ، Viewport معمولاً بزرگ‌تر است. در موبایل، Viewport کوچک‌تر است و ممکن است کاربر نیاز به اسکرول داشته باشد. معرفی واحدهای Viewportواحدهای Viewport به شما امکان می‌دهند که اندازه عناصر را بر اساس اندازه Viewport تعیین کنید. این واحدها بسیار واکنش‌پذیر هستند و به خصوص در طراحی‌های پاسخگو مفید واقع می‌شوند.واحدهای رایج Viewport vw (Viewport Width): یک واحد vw برابر با 1٪ از عرض Viewport است. vh (Viewport Height): یک واحد vh برابر با 1٪ از ارتفاع Viewport است. vmin: کوچکتر از عرض و ارتفاع Viewport را می‌گیرد و 1٪ آن را نشان می‌دهد. vmax: بزرگتر از عرض و ارتفاع Viewport را می‌گیرد و 1٪ آن را نشان می‌دهد. مثال‌هایی از استفاده از واحدهای Viewportاستفاده از vw و vh برای تنظیم عرض و ارتفاع.full-width-box { width: 100vw; height: 50vh; background-color: lightblue;}در اینجا: width: 100vw عرض عنصر را برابر با 100٪ عرض Viewport تعیین می‌کند. height: 50vh ارتفاع عنصر را برابر با 50٪ ارتفاع Viewport تنظیم می‌کند. استفاده از vmin برای اندازه‌دهی متناسب.square-box { width: 50vmin; height: 50vmin; background-color: lightcoral;}در اینجا: 50vmin به عنوان اندازه هر ضلع مربع انتخاب شده که در دستگاه‌های مختلف نسبت ثابتی خواهد داشت. استفاده از vmax برای حداکثر اندازه‌دهی.banner { font-size: 5vmax;}در اینجا: font-size: 5vmax اندازه فونت را بر اساس بزرگترین بعد Viewport تنظیم می‌کند، که برای حفظ وضوح متون در دستگاه‌های مختلف مناسب است. کاربردهای رایج Viewport Units در طراحی وبساخت بخش‌های تمام صفحهواحدهای Viewport می‌توانند برای ایجاد بخش‌هایی با اندازه تمام صفحه استفاده شوند..full-screen-section { width: 100vw; height: 100vh; background: url('background.jpg') no-repeat center center; background-size: cover;}در اینجا: بخش full-screen-section کل صفحه را پوشش می‌دهد و برای طراحی‌های تک صفحه‌ای و اسلاید‌ها بسیار مناسب است. تنظیم فونت واکنش‌گرابا استفاده از واحدهای Viewport، می‌توانید فونت‌هایی بسازید که نسبت به اندازه صفحه واکنش‌گرا باشند..responsive-heading { font-size: 3vw;}در اینجا: font-size: 3vw باعث می‌شود که اندازه فونت متناسب با عرض Viewport تنظیم شود و در دستگاه‌های مختلف به صورت پویا تغییر کند. ساخت بخش‌های منطبق با نسبت ابعادواحدهای Viewport به شما این امکان را می‌دهند که بخش‌هایی با نسبت ابعاد ثابت در دستگاه‌های مختلف ایجاد کنید..aspect-ratio-box { width: 100vw; height: 56.25vw; /* برای نسبت 16:9 */}در اینجا: height: 56.25vw ارتفاع با نسبت 16:9 تنظیم شده تا در نمایشگرهای مختلف نسبت تصویر ثابت بماند. ترکیب واحدهای Viewport با واحدهای دیگر در CSSگاهی اوقات برای طراحی‌های پیچیده‌تر، می‌توانید واحدهای Viewport