CSS در Overflow
overflow این امکان را ایجاد می کند که اگر حجم محتویات زیاد بود scroll برای صفحه اضافه شود یا خیر. چهار نوع مقدار برای overflow وجود دارد ازجمله: visible، hidden، scroll، auto
توجه کنید که تنظیمات overflow تنها بر روی المان های بلاک قابل پیاده سازی است.
همچنین، در سیستم های mac تنها زمانی که overflow:scroll استفاده شود scroll نمایش داده می شود در غیراینصورت scroll نمایش داده نمی شود.
overflow: visible
در این حالت بلاکی با تنظیمات طول و عرض مشخص شکل می گیرد و محتویاتی که درون آن قرار می گیرند اگر حجمشان زیاد باشد محتویات مازاد خارج از بلاک نمایش داده می شوند.
مثال:
<html> <head> <style> div { background-color: coral; width: 200px; height: 65px; border: 1px solid; overflow: visible; } </style> </head> <body> <div>You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element’s box.</div> </body> </html>
overflow: hidden
این ویژگی باعث می شود اگر حجم محتوای بلاک بیشتر از اندازه بلاک باشد آنگاه حجم مازاد حذف می شود.
مثال:
<html> <head> <style> div { background-color: coral; width: 200px; height: 65px; border: 1px solid black; overflow: hidden; } </style> </head> <body> <div>You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element’s box.</div> </body> </html>
overflow: scroll
بلاکی با scroll ساخته و وقتی حجم محتویات داخل بلاک بیش تر از سایز بلاک شود امکان مشاهده محتویات داخل بلاک با حرکت دادن scroll امکان پذیر می شود.
مثال:
<html> <head> <style> div { background-color: coral; width: 200px; height: 100px; border: 1px solid black; overflow: scroll; } </style> </head> <body> <div>You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element’s box.</div> </body> </html>
overflow: auto
این ویژگی مانند overflow:scroll عمل می کند با این تفاوت که درصورت نیاز برای بلاک scroll نمایش داده می شود.
مثال:
<html> <head> <style> div { background-color: coral; width: 200px; height: 65px; border: 1px solid black; overflow: auto; } </style> </head> <body> <div>You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element’s box.</div> </body> </html>
overflow-x و overflow-y
به منظور کنترل بهتر بلاک ها و محتویاتشان می توانیم برای بلاک ها scroll هم در جهت محور افقی و هم در جهت محور عمودی ایجاد کنیم. دستور overflow-x برای ایجاد scroll درجهت محور افقی و overflow-y برای ایجاد scroll درجهت محور عمودی به کار می روند. جهت مقداردهی به این دو ویژگی می توانیم از مقدار scroll برای ایجاد scroll و یا مقدار hidden جهت حذف scroll استفاده کنیم.
مثال:
<html> <head> <style> div { background-color: coral; width: 200px; height: 65px; border: 1px solid black; overflow-x: hidden; overflow-y: scroll; } </style> </head> <body> <div>You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element’s box.</div> </body> </html>