021-20483015

صفت 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

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران (وب مهراز) بپیوندید.

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

مقالات مرتبط