CSS - Scrollbars
CSS - Scrollbars
To accommodate the content within the box/element, the width and height properties cannot allow sufficient spaces.
The CSS-scrollbar property named overflow allows keeping contents within the box if the contents are larger than the box.
This property has following values,
Scroll: When the size of contents is larger than the box then this property allows scrolling to visible the full content.
Auto: This property works the same as scroll but the scrollbar is visible only when the content overflows from the box.
Hidden: This property allows not showing any scrollbar as well as contents are cut off if it overflows from the border.
Visible: This property allows showing full contents even if the contents are overflowing from the borders. Here, no scrollbar is visible.
Example:
<html>
<head>
<style type="text/css">
.pr1
{
display:block;
border: 1 px solid black;
padding: 3px;
margin-top:2px;
width:250 px;
height:70px;
overflow:scroll;
}
.pr2
{
display:block;
border: 1 px solid black;
padding: 3px;
margin-top:2px;
width:250 px;
height:70px;
overflow:auto;
}
.pr3
{
display:block;
border: 1 px solid red;
padding: 3px;
margin-top:2px;
width:250 px;
height:70px;
overflow:hidden;
}
.pr4
{
display:block;
border: 1 px solid black;
padding: 3px;
margin-top:2px;
width:250 px;
height:70px;
overflow:visible;
}
</style>
</head>
<body>
<p> Example of Scroll property: </p>
<div class="pr1">
For designing text into various ways inside a box/element, we have already used border, padding and margin properties. The CSS dimension properties allow controlling the dimension of a box/element with border, padding and margin properties.
</div>
<br/>
<p> Example of auto property: </p>
<div class="pr2">
For designing text into various ways inside a box/element, we have already used border, padding and margin properties. The CSS dimension properties allow controlling the dimension of a box/element with border, padding and margin properties.
For designing text into various ways inside a box/element, we have already used border, padding and margin properties. The CSS dimension properties allow controlling the dimension of a box/element with border, padding and margin properties.
For designing text into various ways inside a box/element, we have already used border, padding and margin properties. The CSS dimension properties allow controlling the dimension of a box/element with border, padding and margin properties.
</div>
<br/>
<p> Example of hidden property: </p>
<div class="pr3">
For designing text into various ways inside a box/element, we have already used border, padding and margin properties. The CSS dimension properties allow controlling the dimension of a box/element with border, padding and margin properties.
For designing text into various ways inside a box/element, we have already used border, padding and margin properties. The CSS dimension properties allow controlling the dimension of a box/element with border, padding and margin properties.
For designing text into various ways inside a box/element, we have already used border, padding and margin properties. The CSS dimension properties allow controlling the dimension of a box/element with border, padding and margin properties.
For designing text into various ways inside a box/element, we have already used border, padding and margin properties. The CSS dimension properties allow controlling the dimension of a box/element with border, padding and margin properties.
</div>
<br/>
<p> Example of visible property: </p>
<div class="pr4">
For designing text into various ways inside a box/element, we have already used border, padding and margin properties. The CSS dimension properties allow controlling the dimension of a box/element with border, padding and margin properties.
</div>
<br/>
</body>
</html>
Output :
