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

شروع موضوع توسط armin_ ‏12 آپریل 2013 در انجمن CSS

  1. armin_

    armin_ Registered User

    تاریخ عضویت:
    ‏31 اکتبر 2012
    نوشته ها:
    357
    تشکر شده:
    27
    محل سکونت:
    پاریس ایران-ارومیه (شهر سبز)
    سلام به همه مشتقان یاد گیری طراحی وب
    دادن عرض و ارتفاع به عناصر با استفاده از 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: ‏22 آپریل 2013
    sirramin و k-boy از این نوشته تشکر کرده اند.
  2. بازدیدیار - افزایش بازدید سایت و سیگنال های برندخرید بک لینک
عسل طبیعی و گرده گل ایرانیخدمات پی پال، وسترن یونیون