توجه داشته باشید که ارتفاع با تعداد خطوط رشد می کند و کوچک می شود، اما عرض همیشه در حداکثر باقی می ماند، حتی زمانی که محتوایی وجود ندارد!
اکنون متوجه می شوم که این خیلی تعجب آور یا حیرت انگیز نیست. این احساس کاملا طبیعی است. اما وقتی به این موضوع فکر می کنیم که چگونه این مقادیر به ما می گوید، جالب می شود.
هنگام محاسبه مقدار پیش فرض یک عنصر width، مرورگر ظاهر می شود بالا درخت، به والد عنصر. اما هنگام محاسبه عنصر پیش فرض height، خوب، بستگی به مورد دارد کودکان. بنابراین مرورگر باید شبیه باشد پایین درخت در عوض
بنابراین وقتی به یک عنصر می گوییم که داشته باشد width: 50%، این چیز مهمی نیست. مرورگرها در حال حاضر از اندازه والد برای محاسبه عرض آنها استفاده کنید، بنابراین گفتن “بسیار خوب، 50٪ از این فضای موجود را بگیرید” آسان است.
اما وقتی به عنصری می گوییم که داشته باشد height: 50%، این یک داستان دیگر است:
آیا مشکل را می بینید؟ آنها سعی می کنند اندازه یکدیگر را افزایش دهند. این یک محاسبه دایره ای است که هرگز حل نمی شود. رازی که در یک معما پیچیده شده است. یک پارادوکس در نتیجه مرورگرها نادیده می گیرند height: 50% اعلامیه برای کودک
برای داشتن چیزی شبیه به height: 50% برای کار، قد والدین نمی تواند به قد کودک بستگی داشته باشد.
ما می توانیم این را با دادن صریح به والد تنظیم کنیم height:
کد زمین بازی
نتیجه
پدر و مادر ما داده می شود height: 300px، که محاسبات عادی را به هم می زند. به جای محاسبه یک اندازه پویا بر اساس فرزندان خود، این برچسب روی مقدار ثابت 300 پیکسل قفل شده است.
در آن صورت به کودک height: 50% قابل حل است ما می توانیم 50٪ از 300 پیکسل را محاسبه کنیم.
در حال حاضر، ما معمولا نیازی به استفاده نیست px واحد برای height. پیکسل ها به اندازه متن انتخاب شده توسط کاربر مقیاس بندی نمی شوند. افرادی که بینایی ضعیفی دارند به طور پیش فرض تمایل به چرخش دارند font-size، که اگر از پیکسل برای اندازه کانتینر خود استفاده کنیم، می تواند باعث سرریز متن و شکستن طرح بندی شود. من یک پست وبلاگ جداگانه دارم که پیامدهای دسترسی را پوشش می دهد پیکسل ها(در برگه جدید باز می شود)، اگر می خواهید در مورد آن بیشتر بدانید.
خوشبختانه، rem واحد به همان اندازه برای ایجاد یک اندازه ثابت و شناخته شده کار می کند:
کد زمین بازی
نتیجه
اینجاست که کار مشکل می شود. ما می توانیم ارتفاع ها را بر اساس درصد تا زمانی که هستند درج کنیم همه محاسبه شده از اندازه روشن:
کد زمین بازی
نتیجه
بالاترین سطح برچسب ارتفاع ثابت 24 rem را مشخص می کند. جدید .wrapper کودک 50 درصد از این قد را اشغال می کند که در 12 رم محاسبه می شود. بنابراین حتی اگر .wrapper از یک قد مبتنی بر درصد استفاده می کند، هنوز هم یک مقدار “قابل دانستن” است.
منظور من از “دانستنی” این است که مقدار را می توان از CSS داده شده به این عنصر یا پیشینیان آن در بالای درخت استنتاج کرد. این به اندازه فرزندان او بستگی ندارد. «قابل تشخیص» یک اصطلاح هنری نیست، حرف خودم است.
و چون .wrapperارتفاع مشخص است، می‌توانیم از ارتفاع مبتنی بر درصد استفاده کنیم within. Whenever an element sets an explicit height in pixels or rems, that entire slice of the DOM tree becomes knowable, and we can use percentages anywhere inside.
پیوند به این عنواندرصد تمام راه پایین
بنابراین در اینجا یک سوال جالب وجود دارد: اگر از ارتفاع سطح بالای مبتنی بر درصد استفاده کنیم چه می شود html عنصر؟
خوب، بیایید تلاش کنیم. در این وبلاگ، من از iframes برای پانل RESULT استفاده می کنم، بنابراین ما اساساً پنجره مرورگر کوچک خود را داریم:
کد زمین بازی
نتیجه
این را بررسی کنید! را tag grows to fill the whole viewport.
This works because the root tag is special. Unlike every other node on the page, doesn’t have a parent, since it’s at the very top of the tree. So when we set height: 100%، از فیلد محتوای هیچ عنصر والد استفاده نمی کند. در عوض، از viewport استفاده می کند خودتبرای دقیق تر بودن، از «بلاک حاوی شروع»، مستطیلی با اندازه و شکل ویوپورت استفاده می کند.
مهمتر از همه، به این معنی است tag has a knowable height, since the dimensions of the viewport don’t depend at all on the children within. There is no CSS I can write that will affect the width or height of the browser window, after all!
So, percentage-based heights work on the top-level DOM node, and we can funnel that value through the whole tree like a hot potato. For many years, this was a core part of my CSS reset, to ensure that my app’s main layout filled the whole viewport:
html, body, #root {
height: 100%;
}این روزها دیگر نیازی به این ترفند نیست. اگر بخواهیم یک عنصر 100% از viewport را اشغال کند، می توانیم استفاده کنیم svh واحد (ارتفاع درگاه دید کوچک؛ مشابه vh اما بدون رفتار عجیب مرورگرهای موبایل). اما هنوز ارزش این را دارد که بفهمیم ارتفاع‌های مبتنی بر درصد چگونه کار می‌کنند، زیرا ما همیشه نمی‌خواهیم چیزها نسبت به نمای دید مقیاس شوند.
مشکل با تنظیم چیزی شبیه به این است height: 24rem این است که اگر محتوای بیش از حد در این فضا وجود داشته باشد می تواند باعث سرریز شود:
کد زمین بازی
نتیجه
بیایید سعی کنیم این را با مبادله حل کنیم height با min-height:
کد زمین بازی
نتیجه
در نگاه اول عالی به نظر می رسد... اما اگر برخی از مطالب را حذف کنیم، متوجه می شویم که قد مبتنی بر درصد ما از کار افتاده است:
کد زمین بازی
نتیجه
این چیزی است که همیشه من را ناامید می کند. من هنوز هم هنگام تنظیم یک اندازه مشخص به والد می دهم min-height: 24remدرسته
آن را احساسات به این ترتیب، حداقل برای من، زیرا ما از یک عدد 24rem استفاده می کنیم. اما وقتی استفاده می کنیم min-height به جای height، ما در واقع اندازه ثابتی به عنصر نمی دهیم.
به یاد داشته باشید که آنچه ما نیاز داریم قد والدین است آنها وابسته نیستند از قد کودک بنابراین ما از پارادوکس دایره ای اجتناب می کنیم. و ما در اینجا آن شرط را انجام نمی دهیم; والد همچنان بر اساس فرزندان خود رشد می کند و کوچک می شود. ما حد پایین‌تری را تعیین کرده‌ایم، اما ارتفاع واقعی می‌تواند از 24 rem تا بی‌نهایت باشد، بسته به آنچه در داخل است.
پیوند به این عنوانراه حل
خوب، واقعاً چگونه این مشکل را حل کنیم؟
تا کنون، تمام نمونه‌هایی که دیده‌ایم، از حالت طرح‌بندی پیش‌فرض CSS، Flow layout استفاده کرده‌اند. به نظر می رسد که Flexbox و Grid واقعاً می توانند در اینجا به ما کمک کنند!
این را بررسی کنید:
کد زمین بازی
نتیجه
سعی کنید بیشتر محتوای داخل را حذف کنید , and notice that the peach-colored element still fills its container. This is exactly what we want! 😄
When we set display: grid، چیزی به نام "متن قالب بندی شبکه" ایجاد می کنیم. این بدان معنی است که کودک درون، .wrapper، از یک طرح بندی Grid به جای طرح بندی Flow استفاده می کند.
و در چیدمان شبکه ای، عناصر در اطراف فرزندانشان فرو نمی ریزند. در عوض، کودکان رشد خواهند کرد تا سلول های شبکه خود را پر کنند، هم به صورت افقی و هم به صورت عمودی. به طور پیش‌فرض، شبکه‌ها یک ردیف و یک ستون خواهند داشت و آن ردیف در سراسر سطح شبکه کشیده می‌شود. این بدان معناست که ما نیازی به تنظیم نداریم height: 100%. کودک به طور خودکار رشد می کند. ✨
ما همچنین می توانیم از Flexbox استفاده کنیم، اگرچه باید به کودک دستور دهیم که فضای موجود در محور اصلی را با flex: 1:
کد زمین بازی
نتیجه
همانطور که در پست وبلاگم درک طرح بندی به اشتراک گذاشتم الگوریتم ها”(در برگه جدید باز می شود)CSS به نوعی مجموعه ای از زبان های کوچک است که هر کدام هدف خاص خود را دارند. به‌طور پیش‌فرض، بیشتر تگ‌های HTML از طرح‌بندی Flow استفاده می‌کنند که اساساً الگوریتم طرح‌بندی Microsoft Word است. برای مقالات و سایر اسناد دیجیتال عالی است، اما برای ایجاد طرح‌بندی برنامه‌های وب چندان خوب نیست.
من فرض می کنم شما در حال حاضر از Flexbox و Grid استفاده می کنید، اما هنوز هم به طرز شگفت آوری آسان است که در این مسئله قد مبتنی بر درصد گرفتار شوید. هنگامی که این اتفاق می افتد، راه حل این است که به الگوریتم چیدمان مناسب تری بروید. 💖
اگر این پست وبلاگ برای شما مفید بود، شاید بخواهید بدانید که من یک دوره کامل CSS دارم!
دوره من CSS برای جاوا اسکریپت نام دارد توسعه دهندگان(در برگه جدید باز می شود). مثل یک نسخه بارگذاری شده این وبلاگ است: مقالات تعاملی مانند این، اما همچنین ویدیوهای کوچک، تمرین های چالش برانگیز، پروژه های الهام گرفته شده از دنیای واقعی و حتی برخی از بازی های کوچک وجود دارد.
این دوره یک هدف دارد: به شما کمک کند یک مدل ذهنی قوی و جامع برای CSS بسازید تا بتوانید با اطمینان از آن استفاده کنید و انواع رابط های کاربری پیچیده را بدون سرخوردگی یا حدس و گمان ایجاد کنید.
من این دوره را در درجه اول برای توسعه دهندگان React/Angular/Vue طراحی کردم، زیرا افراد زیادی را در این موقعیت می شناختم که در JS خوب بودند اما با CSS دست و پنجه نرم می کردند. با این حال، بیشتر دوره بر اصول وانیلی CSS تمرکز دارد، بنابراین حتی اگر متخصص React نباشید، باز هم می‌توانید از این دوره سود زیادی ببرید.
در اینجا می توانید اطلاعات بیشتری کسب کنید:
آخرین به روز رسانی از
3 دسامبر 2025
