امروز خیلی اتفاقی با یه قابلیتی توی CSS آشنا شدم که خیلی به درد می خوره

شاید برای شما هم پیش اومده که تو طراحی یه صفحه وب نیاز داشتین که ارتفاع یک المان را به صورت ثابت بدین ، البته ثابت نه به این معنی که یک عدد مثلا 300px وارد کنید

اولین راه حلی که به ذهن من میرسه اینه که بیام با استفاده از jquery و یا ابزار های مشابه رویداد تغییر سایز صفحه رو بگیرم و به نسبت همون بیام  درصد ارتفاع مورد نیازم رو حساب کنم و به المانم اعمال کنم

که البته با این که این راه درسته و به خوبی هم جواب میده اما به هزار و یک دلیل ممکنه شمارو تو دردسر بندازه مخصوصا وقتی که دارین واکنش گرا کار می کنین

راه حلی که برای این مساله هست استفاده از یک دستور پیش پردازنده در CSS هست! به اسم ()Calc

نحوه استفاده از این به این صورت هست که توی کانتینر المانی که می خواین سایزش رو بدست بیارین به این صورت عمل کنید

    height: calc(100% - 50px);

خوب یه مساله وجود داره!

آیا همه مرورگرا این دستور رو پشتیبانی می کنن؟  

برا اساس آماری که سایت Caniuse.com قابل اعتماد داده تقریبا مرورگر های مدرن همشون این رو پیشتیبانی می کنن

این هم یک نمونه پیاده شده با این دستور.