overflow
ویژگی overflow
تعیین میکنه وقتی محتوای داخل یک عنصر از اندازهی مشخصشده (مثلاً height یا width) بیشتر شد، مرورگر چطور اون محتوا رو مدیریت کنه.
1️⃣ مقادیر overflow
✅ visible
(پیشفرض)
محتوا حتی اگر از محدودهی عنصر خارج بشه، همچنان نمایش داده میشه.
✅ hidden
محتوایی که از محدوده خارج بشه بریده میشه و دیده نمیشه.
✅ scroll
همیشه اسکرولبار اضافه میشه (چه نیاز باشه چه نباشه).
✅ auto
اگر محتوا بیشتر از اندازه عنصر باشه → اسکرولبار ظاهر میشه،
اگر جا بشه → اسکرولبار نمیاد.
2️⃣ overflow-x و overflow-y
میتونی کنترل جداگانه برای محور افقی (x) و عمودی (y) داشته باشی:
3️⃣ نکات مهم
-
برای اینکه
overflow
عمل کنه، معمولاً باید ابعاد (width, height) مشخص بشه. -
اگر عنصر
position: absolute
یاrelative
داشته باشه، overflow داخل همون باکس محاسبه میشه. -
توی طراحی ریسپانسیو، معمولاً
overflow: auto;
یاhidden
استفاده میشه تا صفحه به هم نریزه.
4️⃣ مثال کاربردی
📌 اینجا اگر متن بیشتر از 100px ارتفاع بشه، مرورگر بهطور خودکار اسکرول میده.