منتخب بازارچه

تعیین عرض و طول عناصر با استفاده از خاصیت calc در css3

armin_

Registered User
سلام به همه مشتقان یاد گیری طراحی وب
دادن عرض و ارتفاع به عناصر با استفاده از css چندین راه داره که معمولا با استفاده از % درصد یا px پیسکل یا هر دو در کنار هم صورت می گیره.

ولی یک مشکلی که در این حالت هستش اینه که برای مثال اگر ما یک Div داشته باشیم و عرض اون رو برابر 500px قرار بدیم و بعد یک Div دیگه داخل Div اول بسازیم و عرض اون رو برابر 100% قرار بدیم

Div دوم میاد کل عرض Div اول رو برای خودش بر می داره یعنی 100% عرض رو.

حالا اگر ما بخوایم یک Border یا Padding به Div دوم اضافه کنیم عرض اون بیشتر از Div اول میشه و ازش بیرون می زنه به عبارتی اگر ما داشته باشیم:


Div یک عرض = 500px

Div دوم عرض = 100%

تا اینجای کار Div دوم دقیقا هم عرض با Div اول هستش حالا بیایم 5px هم Border به Div دوم اضافه کنیم در این صورت 10px می بینیم که Div دوم از Div اول بیشتر شد و زد بیرون
چرا؟ چون 5px به سمت راست و 5px به سمت چپ Div دوم اضافه شده (همون Border) پس میشه 100% +10px صد درصد بعلاوه ده پیکسل
که اون ده پیکسل می زنه بیرون

حالا ما دو راه داریم که کاری کنیم که این ده پیکسل نزنه بیرون و دو تا Div دقیقا هم عرض بشن .

راه اول :

بیایم عرض Div دوم رو مثلا بذاریم 90% در این صورت دیگه نمی زنه بیرون چون حالا شده 90% +10px نود درصد بعلاوه ده پیکسل .

مشکل این روش اینه که با بزرگ تر شدن عرض Div اول عرض Div دوم از تنظیم در میاد چون شما اون رو روی 500px تنظیم کردید.


راه دوم:

استفاده از خاصیت calc در css3 هستش .با استفاده از این خاصیت شما می تونید جوری تنظیم کنید که اگر عرض Div اول بزرگ یا کوچک شد بازم Div دوم باش هر اندازه باشه

به این صورت که ما میایم می نویسیم برای عرض Div دوم:
HTML:
width:calc(100% - 10px );
100% که می گیم کل عرض Div والد خودت رو بردار کل عرض Div اول -10px هم می گیم از این کل عرض 10px کم کن.
این ده پیکسل از کجا امد این همون border بود 5 پیکسل سمت راست و 5 پیکسل سمت چپ رو هم ده پیکسل



فقط دقت کنید برای هر مرورگر پیشوند ها رو بذارید.webkit moz o

بعد این خاصیت از - + * / پشتیبانی میکنه قبل و بعد ار علامت یک فاصله قرار بدید space

تو عکس زیر هم می تونید یک مثال ببینید.

قبل استفاده از calc
css3-calc-step2.jpg

بعد استفاده از calc



css3-calc-step3.jpg


عکس مطالب از اینترنت گرفته شده است.
نویسنده مطلب : فرامرز طیاری
 
Last edited:
بالا