Description:-
in this
example we explain that how to create a scrollbar in Table or Div or any
Content so content is Display in proper way.
Css Overflow Property
Property Values
Value
|
Description
|
visible
|
The overflow is not clipped. It renders outside the element's
box. This is default(ignore hight and width)
|
hidden
|
The overflow is clipped, and the rest of the content will
be invisible
|
scroll
|
The overflow is clipped, but a scroll-bar is added to see the
rest of the content
|
auto
|
If overflow is clipped, a scroll-bar should be added to see the
rest of the content
|
The main
Advantages of the Scrollbar is that when the size of data is Large and you can
Display in Table Format.
For
Example:-
Suppose
you have a 10000 Record that you have to Display in a table Format at that time
it may require much more Spaces and our webpage can not contain other control
so at that time you can use this Example and Display in very short size with
scrollbar.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled
Page</title>
</head>
<body>
<html>
<head>
<style type="text/css">
div.scroll
{
background-color:BLUE;
width:100px;
height:100px;
overflow:scroll;
}
div.hidden
{
background-color:LIME;
width:100px;
height:100px;
overflow:hidden;
}
</style>
</head>
<body>
<p>The overflow property specifies what to do if
the content of an element exceeds the size of the element's box.</p>
<p>overflow:scroll</p>
<div class="scroll">You
can use the overflow property when you want to have better control of the
layout. The default value is visible.</div>
<p>overflow:hidden</p>
<div class="hidden">You
can use the overflow property when you want to have better control of the
layout. The default value is visible.</div>
</body>
</html>
0 comments:
Post a Comment