|||

ورود به حساب کاربری

شماره همراه خود را وارد کنید

ورود با کلمه عبور ارسال کد تایید

فراموشی کلمه عبور

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

ورود با کلمه عبور تنظیم مجدد

ورود به حساب کاربری

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

شماره همراه خود را وارد کنید

ورود و ادامه

صفت overflow در CSS

  • زماني كه براي محتوايي محدوده اي تعيين ميكنيم ،‌ اگر محتوا از اين محدوده به علت زياد بودن يا بزرگ بودن ،‌ خارج نشود از صفت overflow براي عدم نمايش باقي مانده محتوا يا اضافه كردن نوار اسكرول به آن استفاده مي كنيم.

    صفت overflow يكي از 4 مقدار زير را مي تواند داشته باشد :

    visible : محتواي بيشتر از محدوده قطع نمي شود و خارج از محوطه محتوا ادامه مي يابد.
    hidden : باقيمانده محتوا نمايش داده نمي شود و محتواي موجود در محدوده تعيين شده نمايش داده مي شود.
    scroll : باقي مانده نمايش داده نمي شود اما يك نوار اسكرول براي نمايش باقي مانده ،‌ زير آن ايجاد مي شود.
    auto : بسته به شرايط صفحه و مرورگر ،‌ شايد يك نوار اسكرول براي نمايش باقي مانده محتوا ،‌ ايجاد شود.

    نكته !‌ صفت overflow فقط در عناصر سطح بلوك كه ارتفاع مشخصي دارند ،‌ كار مي كند.
    نكته ! در OS X Lion سيستم عامل Mac ، نوار اسكرول فقط زماني كه استفاده شوند نمايان مي شوند.

     

    Visible

    بطور پيش فرض مقدار visible در صفت overflow مشخص مي كند كه محتوا قطع نشود و باقي آن از محوطه تعيين شده بيرون ميزند :

    مثال :
    صفت overflow با مقدار visible
    div {
        width: 200px;
        height: 50px;
        background-color: #eee;
        overflow: visible;
    }
    مشاهده مثال

     

    Hidden

    مقدار hidden مشخص مي كند كه محتوا قطع شود و باقي مانده محتوا مخفي بماند.

    مثال :
    صفت overflow با مقدار hidden
    div {
        overflow: hidden;
    }
    مشاهده مثال

     

    Scroll

    مقدار scroll مشخص مي كند كه محتوا در داخل محدوده تعيين شده نمايش داده شود و يك نوار اسكرول به جعبه متن اضافه مي شود تا باقي مانده آن قابل دسترسي باشد. به ياد داشته باشيد كه در اين حالت نوار اسكرول هم عمودي و هم افقي ايجاد مي شود ،‌ حتي اگر به آن نياز نداشته باشيد.

    مثال :
    صفت overflow با مقدار scroll
    div {
        overflow: scroll;
    }
    مشاهده مثال

     

    Auto

    مقدار auto همانند scroll است با اين تفاوت كه نوار اسكرول فقط به هنگام نياز اضافه مي شود.

    مثال :
    صفت overflow با مقدار auto
    div {
        overflow: auto;
    }
    مشاهده مثال

     

    overflow-x و overflow-y

    اين دو صفت زماني مورد استفاده است كه بخواهيم ديد افقي يا عمودي باقي مانده محتوا را تنظيم كنيم.

    مثال :
    دید افقی و عمودی
    div {
        overflow-x: hidden; /* Hide horizontal scrollbar */
        overflow-y: scroll; /* Add vertical scrollbar */
    }
    مشاهده مثال

  

 

نظر شما

>

یادگیری CSS

مقالات و دروس

عضویت در خبرنامه شرکت نرم افزاری وب مهراز

برای اطلاع از بسته ها ، تخفیف های استثنایی و تازه های ما به خبرنامه وب مهراز بپیوندید.

لطفا شماره همراه صحیح وارد کنید.
لطفا ایمیل صحیح وارد کنید.

مقالات مرتبط

|||

ورود به حساب کاربری

شماره همراه خود را وارد کنید

ورود با کلمه عبور ارسال کد تایید

فراموشی کلمه عبور

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

ورود با کلمه عبور تنظیم مجدد