در زبان CSS، ویژگی ای به نام overflow وجود دارد. کار این ویژگی محدود کردن محتوای یک صفحه است تا از حد خودش تجاوز نکند؛ به طوری که اگر محتوای مورد نظر ما (مثلا چند پاراگراف متنی) از محدوده ی خودش خارج شود این دستور آن را درون محدوده ی خودش قرار داده و برای دیده شدن کامل مطلب به آن محدوده اسکرول بار اضافه می کند. به مثال زیر نگاه کنید:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<!DOCTYPEhtml>
<html>
<head>
<style>
#overflowTest {
background:#4CAF50;
color:white;
padding:15px;
width:50%;
height:100px;
overflow:scroll;
border:1pxsolid#ccc;
}
</style>
</head>
<body>
<div id="overflowTest">Thistext isreally longandthe height of its container isonly100pixels.Therefore,ascrollbar isadded tohelp the reader toscroll the content.Lorem ipsum dolor sit amet,consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Ut wisi enim ad minim veniam,quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.Duis autem vel eum iriure dolor inhendrerit invulputate velit esse molestie consequat,vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.Typi non habent claritatem insitam;est usus legentis iniis qui facit eorum claritatem.</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
در این مثال متنی طولانی را انتخاب کرده ایم ولی محدوده ی نگه دارنده اش را کوچک کرده ایم. سپس با استفاده از ویژگی overflow آن را در همان محدوده قرار داده و برایش اسکرول بار گذاشته ایم. البته شما می توانید با مقادیر دیگر دستور overflow کار های دیگری نیز بکنید. مقادیر مجاز برای overflow از این قرار اند:
visible : این مقدار، حالت پیش فرض است. در این حالت محتوا محدود نمی شود بلکه از نگه دارنده ی خود خارج شده و از محدوده اش تجاوز می کندhidden : در این حالت محتوای اضافی کاملا قطع شده و دیگر قابل مشاهده نمی باشدscroll : در این حالت محتوا محدود می شود و برای دیده شدن کامل آن به نگه دارنده یک اسکرول بار افزوده می شودauto : این حالت دقیقا مانند scroll است اما تنها زمانی که واقعا نیاز باشد اسکرول بار را اضافه میکند
نکته: ویژگی overflow تنها برای عناصر Block ای کار می کند که ارتفاع (height) آن ها مشخص شده باشد.
بیایید مثال هایی را از هر کدام از این مقادیر ببینیم.
حالت visible
همانطور که گفتیم در این حالت خصوصیت overflow مقدار visible را می گیرد که در لغت به معنی «نمایان» یا «قابل رویت» است. این حالت همان حالت پیش فرض است و اگر محتوای عنصری در این حالت از حد خودش بیشتر باشد، باز هم قابل رویت خواهد بود چرا که بدون توجه به محدوده از مرز خودش فراتر می رود. به مثال زیر توجه کنید:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<!DOCTYPEhtml>
<html>
<head>
<style>
div {
background-color:#eee;
width:200px;
height:50px;
border:1pxdottedblack;
overflow:visible;
}
</style>
</head>
<body>
<h2>CSS Overflow</h2>
<p>By default,the overflow isvisible,meaning that it isnotclipped andit renders outside the element's box:</p>
<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'sbox.</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
حالت hidden
hidden در لغت به معنی «مخفی» است. در این حالت اگر محتوای عنصر از حد خودش بیشتر شود، قسمت اضافی برش می خورد و دیگر نمایش داده نمی شود. به مثال زیر توجه کنید:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<!DOCTYPEhtml>
<html>
<head>
<style>
div {
background-color:#eee;
width:200px;
height:50px;
border:1pxdottedblack;
overflow:hidden;
}
</style>
</head>
<body>
<h2>CSS Overflow</h2>
<p>With the hidden value,the overflow isclipped,andthe rest of the content ishidden:</p>
<div>You can usethe overflow propertywhen you want tohave better control of the layout.The overflow propertyspecifies what happens ifcontent overflows an element's box.</div>
<p dir='rtl'>ویژگیoverflowراازکدهاحذفکنیدتامتوجهتفاوتآنباحالتعادیبشوید.</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
ویژگی scroll
ویژگی scroll برایش مهم نیست که محتوا از حد خود تجاوز کرده است یا خیر بنابراین چه نیاز باشد و چه نباشد، یک اسکرول بار افقی و یک اسکرول بار عمودی به آن قسمت اضافه می کند:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<!DOCTYPEhtml>
<html>
<head>
<style>
div {
background-color:#eee;
width:200px;
height:100px;
border:1pxdottedblack;
overflow:scroll;
}
</style>
</head>
<body>
<h2>CSS Overflow</h2>
<p>Setting the overflow value toscroll,the overflow isclipped andascrollbar isadded toscroll inside the box.Note that thiswill addascrollbar both horizontally andvertically(even ifyou donotneed it):</p>
<div>You can usethe overflow propertywhen you want tohave better control of the layout.The overflow propertyspecifies what happens ifcontent overflows an element'sbox.</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
در مثال بالا می بینید، با اینکه نیازی به اسکرول افقی نیست اما ان را هم اضافه کرده است. در واقع حتی اگر متن ما کوچک بود باز هم هر دو اسکرول اضافه می شدند.
ویژگی auto
حالت auto بسیار شبیه به مقدار scroll است با این تفاوت که کمی هوشمند تر است و تنها زمانی اسکرول بار ها را اضافه می کند که واقعا نیازی به آن ها باشد (چه عمودی و چه افقی).
به مثال زیر توجه کنید:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<!DOCTYPEhtml>
<html>
<head>
<style>
div {
background-color:#eee;
width:200px;
height:50px;
border:1pxdottedblack;
overflow:auto;
}
</style>
</head>
<body>
<h2>CSS Overflow</h2>
<p>The auto value issimilar toscroll,only it add scrollbars when necessary:</p>
<div>You can usethe overflow propertywhen you want tohave better control of the layout.The overflow propertyspecifies what happens ifcontent overflows an element'sbox.</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
همانطور که در این مثال مشاهده می کنید تنها اسکرول عمودی را داریم و از اسکرول افقی خبری نیست.
سوال: اگر بخواهیم تنها در حالت افقی یا عمودی اسکرول اضافه کنیم چه کار باید بکنیم؟
پاسخ: شما می توانید از دستور overflow-x برای اضافه کردن اسکرول بار در محور افقی و overflow-y برای اضافه کردن آن در محور عمودی استفاده کنید:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<!DOCTYPEhtml>
<html>
<head>
<style>
div {
background-color:#eee;
width:200px;
height:50px;
border:1pxdottedblack;
overflow-x:hidden;
overflow-y:scroll;
}
</style>
</head>
<body>
<h2>CSS Overflow</h2>
<p>You can also change the overflow of content horizontally orvertically.</p>
<div>You can usethe overflow propertywhen you want tohave better control of the layout.The overflow propertyspecifies what happens ifcontent overflows an element'sbox.</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
در این صورت می توانیم برای محور های عمودی و افقی به صورت جداگانه اسکرول تعریف کنیم.
امیدوارم از این قسمت لذت برده باشید.
منبع: روکسو
چطور از فشرده ساز Winrar استفاده کنیم؟