آموزش CSS

آموزش CSS - کار با Overflow

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

مدیریت محتوای سر ریز شده:

موقعیت هایی  وجود دارد که ممکن است المان مورد نظر بزرگ تر از ابعاد خود باکس( جعبه) باشد. به عنوان مثال فرض کنید،  خصوصیت عرض و ارتفاع داده شده فضای کافی برای سازگاری محتوای المان و جای دهی آن ندارد.  خصوصیت Overflow در زبان برنامه نویسی CSS به شما اجازه می دهد  بریده شدن محتوا، رندر شدن اسکرول بارها یا نمایش محتوای سرریز شده از المان را مشخص نمایید.  این خصوصیت می تواند یکی از مقادیر زیر را اتخاذ نماید:

visible (default), hidden, scroll, and auto

زبان برنامه نویسی CSS  خصوصیت های overflow-x و overflow-y را  نیز تعریف می کند که به شما کمک می کند کنترل مستقلی از بریده شدن افقی و عمودی را داشته باشید.

div {
    width: 250px;
    height: 150px;
    overflow: scroll;
}

مقدار

توضیح

visible

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

hidden

محتوایی که از جعبه سر ریز شده است بریده می شود و باقی مانده محتوا نامرئی خواهد شد.

scroll

درست همانند مقدار Hidden محتوای سر ریز شده بریده می شود  اما مکانیسم اسکرول کردن را برای دسترسی به محتوای سر ریز شده فراهم می آورد.

auto

اگر محتوا از جعبه المان سر ریز شده باشد به طور خودکار اسکرول باری برای مشاهده باقی مانده فراهم می شود. در غیر اینصورت اسکرول بار ظاهر نخواهد شد.

در صورتی که سوال و یا نظری دارید، از بخش نظرات با ما در میان بگذارید.

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

شما چه نظر و یا سوالی درباره این نوشته دارید؟

مبحث آموزشی

آموزش CSS

Learn CSS

پرســیدن سؤال جدید

سؤال های تخصصی خود را از ما بپرسید

دنبال کردن تلگرام کانال سافت اسکیل

https://telegram.me/softskill_ir

عملیات کاربران

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

کلیک کنید و سوالات خود را از ما بپرسید
لطفا فرم سوال را پر کنید

سوال شما با موفقیت ثبت شد. برای اینکه بتوانیم به شما اطلاع رسانی کنیم، موارد زیر را وارد کنید:

لطفا چند لحظه منتظر بمانید ...