امروز خیلی اتفاقی با یه قابلیتی توی CSS آشنا شدم که خیلی به درد می خوره
شاید برای شما هم پیش اومده که تو طراحی یه صفحه وب نیاز داشتین که ارتفاع یک المان را به صورت ثابت بدین ، البته ثابت نه به این معنی که یک عدد مثلا 300px وارد کنید
اولین راه حلی که به ذهن من میرسه اینه که بیام با استفاده از jquery و یا ابزار های مشابه رویداد تغییر سایز صفحه رو بگیرم و به نسبت همون بیام درصد ارتفاع مورد نیازم رو حساب کنم و به المانم اعمال کنم
که البته با این که این راه درسته و به خوبی هم جواب میده اما به هزار و یک دلیل ممکنه شمارو تو دردسر بندازه مخصوصا وقتی که دارین واکنش گرا کار می کنین
راه حلی که برای این مساله هست استفاده از یک دستور پیش پردازنده در CSS هست! به اسم ()Calc
نحوه استفاده از این به این صورت هست که توی کانتینر المانی که می خواین سایزش رو بدست بیارین به این صورت عمل کنید
height: calc(100% - 50px);
خوب یه مساله وجود داره!
آیا همه مرورگرا این دستور رو پشتیبانی می کنن؟
برا اساس آماری که سایت Caniuse.com قابل اعتماد داده تقریبا مرورگر های مدرن همشون این رو پیشتیبانی می کنن
این هم یک نمونه پیاده شده با این دستور.
mikhastam Like konam
khosheman amad :D