MCQs Test!! VB Basic Test !! Essentials of VB !! Creating User Services !! function !! Anatomy !! GK March-2019 !! DATA TYPES IN JAVA !! Classes ,Constructor ,Methods,Inheritance !! Ecology-I !! Biology 2019 !! Gk april 2019 !! Biology (living world) !! Plant anatomy !! CELL STRUCTURES AND FUNCTION !! General biology !! Human physiology !! Data structure !! Ecology-II !! GK TEST !! Reproduction in plants !! Human reproduction !! The ABC of C !! Operating system set1 !! Operating system set2 !! Gk and current affairs !! Animal kingdom !! Number system !! Animal kingdom-II !! Gk TEST-III !! Number series !! Microorganisms !! Interview question in c !! Time and Work !! Percentage !! General history !! Average !! Cells !! Locomotion and Movement !! paging !! Bacteriology !! Page replacement policy !! Secondary memory and Disk scheduling !! Introduction of Nervous System and neurons !! Plant harmones !! Transport and Mineral Nutrition in Plants !! Neurotransmitters !! Modern Indian History !! Photosynthesis in Plants !! Modern Indian History-II !! Plant respiration !! Environment & Biodiversity !! Environment & Biodiversity - II !! Algae, Bryophytes, Pteridophytes !! Area !! Cricket !! Days of the Year (India and the World) !! Plant Pathology - I !! Indian Transport System !! Plant Pathology - II !! Aptitude !! Biology !! Botany !! C language !! Computer Science !! Core Java !! Gate !! GK !! Mysql !! Operating system !! Physics !! VB-Visual Basic !! Zoology

CSS Tutorials

Scrollbars In CSS
Previous Home Next

There may be a case when an element's content might be larger than the amount of space allocated to it. For example given width and height properties did not allow enough room to accommodate the content of the element.CSS provides a property called overflow which tells the browser what to do if the box's contents is larger than the box itself. This property can take one of the following values:

  1. Visible: Allows the content to overflow the borders of its containing element.
  2. Hidden: The content of the nested element is simply cut off at the border of the containing element and no scrollbars is visible.
  3. Scroll: The size of the containing element does not change, but the scrollbars are added to allow the user to scroll to see the content.
  4. Auto: The purpose is the same as scroll, but the scrollbar will be shown only if the content does overflow.
Simple Example
<html>
<head>
<style>
p.auto{
display:block;
border: 1px solid red;
padding:5px;
margin-top:5px;
width:200px;
height:50px;
overflow:auto;
}
p.scroll{
display:block;
border: 1px solid red;
padding:5px;
margin-top:5px;
width:200px;
height:50px;
overflow:scroll;
}
.hidden{
display:run-in;
border:2px groove red;
padding:5px;
margin-top:5px;
width:200px;
height:50px;
overflow:hidden;
}
.inherit{
display:block;
border:2px groove red;
padding:5px;
margin-top:5px;
width:200px;
height:50px;
overflow:inherit;
}
.visible{
display:block;
border:2px groove red;
padding:5px;
margin-top:5px;
width:200px;
height:50px;
overflow:visible;
}
</style>
</head>
<body>
<p class="auto">Hello, i am show you the overflow.
Bassically in which we display  auto property </p>
<p class="scroll">Hello, i am show you the overflow.
Bassically in which we display scroll property</p>
<p class="hidden">Hello, i am show you the overflow.
Bassically in which we display hidden property</p>
<p class="inherit">Hello, i am show you the overflow.
Bassically in which we display inherit property</p>
<p class="visible">Hello, i am show you the overflow.
Bassically in which we display visible property</p>
</body>
</html>

Output

Previous Home Next