Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Which property is used to tell the browser what to do if the box's content is larger than the box itself?
CSS provides a property called overflow which tells the browser what to do if the box's contents are larger than the box itself. This property can take one of the following values −
| Value | Description |
|---|---|
| visible | Allows the content to overflow the borders of its containing element. |
| hidden | The content of the nested element is simply cut off at the border of the containing element and no scrollbars are visible. |
| 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. |
| auto | The purpose is the same as a scroll, but the scrollbar will be shown only if the content does overflow. |
Example
You can try to run the following code to implement the overflow property −
<html>
<head>
</head>
<style>
.scroll{
display:block;
border: 2px solid green;
padding:10px;
margin-top:10px;
width:300px;
height:50px;
overflow:scroll;
}
.auto{
display:block;
border: 2px solid green;
padding:10px;
margin-top:10px;
width:300px;
height:50px;
overflow:auto;
}
</style>
<body>
<p>Example of scroll value:</p>
<div class = "scroll">
I am going to keep lot of content here just to show you how
scrollbars works if there is an overflow in an element box.
This provides your horizontal as well as vertical scrollbars.
</div>
<br />
<p>Example of auto value:</p>
<div class = "auto">
I am going to keep lot of content here just to show you how scrollbars
works if there is an overflow in an element box. This provides your
horizontal as well as vertical scrollbars.
</div>
</body>
</html>
Updated on: 25-Jun-2020
95 Views
Advertisements