CSS Scrollbars

CSS Scrollbars/CSS overflow Property

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 do 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.

Property Values:

Value Description
visible The overflow is not clipped. It renders outside the element's box. This is default.
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.

Example:

    <!DOCTYPE html>
<html>
<head>
<style>
body {
     width:507px; 
     border-style: dotted; 
     border-width: 2px;
}
div {
    border-style: solid; 
    border-width:2px; 
    margin:56px 0px 7px 7px;
    padding:7px; 
    background-color: #FFEFD5; 
    width:100px; 
    height:200px; 
}
#caja1{ 
    border-color:red; 
    float:left; 
    overflow: visible;
}
#caja2{  
    border-color:blue;  
    float:left; 
    overflow: hidden;
}
#caja3{  
    border-color:green;  
    float: left; 
    overflow: scroll;
}
#caja4{ 
    border-color:orange; 
    float: left; 
    overflow: auto;
}
.limpiador {
    clear:both; 
    padding:0; 
    width:0; 
    height:0; 
    border-style:none; 
}
</style>
</head>
<body>
<div id="caja1">Caja 1 aprenderaprogramar.com web de didáctica y divulgación de la programación cursos humor y más
El tutorial css desde cero permite aprender sin tener conocimientos previos</div>
<div id="caja2">Caja 2 aprenderaprogramar.com web de didáctica y divulgación de la programación cursos humor y más
El tutorial css desde cero permite aprender sin tener conocimientos previos</div>
<div id="caja3">Caja 3 aprenderaprogramar.com web de didáctica y divulgación de la programación cursos humor y más
El tutorial css desde cero permite aprender sin tener conocimientos previos</div>
<div id="caja4">Caja 4 aprenderaprogramar.com web de didáctica y divulgación de la programación cursos humor y más
El tutorial css desde cero permite aprender sin tener conocimientos previos</div>
<div id="limpiador"></div>
</body>
</html>
Try it with the Editor