Home > Article > Web Front-end > What is the difference between overflow: auto and overflow: scroll in CSS?
What is the difference between overflow: auto and overflow: scroll in CSS?
- WBOYforward
- 2023-08-28 11:29:02822browse
In CSS, the ‘overflow’ attribute is used to specify the overflow of the content of an HTML element. For example, if the height of the div element is "500px" and the height of the inner content is "1000px", we need to make the content scrollable.
In this tutorial, we will learn the difference between the "auto" and "scroll" values of the CSS "overflow" property.
Overflow: Automatic in CSS
In CSS, overflow: auto sets the overflow of HTML elements to auto. This means that if the div's content overflows, it will set 'scroll' to the value of the overflow property; otherwise, it will set 'none' to the value of the overflow property.
grammar
Users can use the overflow: auto CSS property according to the following syntax.
overflow: auto;
Example
In the example below, we have created the HTML div element and given the "main" class name. Additionally, we set a fixed width and height for the div element. Additionally, we set the "overflow: auto" CSS property
In the output, the user can observe that it displays scroll bars because the content size is larger than the size of the div element.
<html>
<head>
<style>
.main {
height: 100px;
width: 500px;
font-size: 1rem;
overflow: auto;
border: 2px solid red;
}
</style>
</head>
<body>
<h2> <i> overflow: auto </i> in CSS </h2>
<div class = "main">
<p> TutorialsPoint! </p>
<p> TutorialsPoint! </p>
<p> TutorialsPoint! </p>
<p> TutorialsPoint! </p>
<p> TutorialsPoint! </p>
<p> TutorialsPoint! </p>
<p> TutorialsPoint! </p>
<p> TutorialsPoint! </p>
</div>
</body>
</html>
Example
In the example below, the dimensions of the inner content of the div element are smaller than the dimensions of the div element. In the output, the user can observe that the div element is not scrollable as the content does not overflow.
<html>
<head>
<style>
.main {
height: 200px;
width: 100px;
font-size: 1rem;
overflow: auto;
border: 2px solid red;
}
</style>
</head>
<body>
<h2> <i> overflow: auto </i> in CSS </h2>
<div class = "main">
<p> TutorialsPoint! </p>
<p> TutorialsPoint! </p>
<p> TutorialsPoint! </p>
</div>
</body>
</html>
Overflow: Scroll in CSS
"overflow:scroll" always displays scroll bars in HTML elements, even if the element's content does not overflow, and it always displays horizontal and vertical scroll bars.
grammar
Overflow: scroll;
Example
In the example below, we add content to a div element that fits the dimensions of the div element. Additionally, we use CSS to set "overflow:scroll" for the div element.
In the output, the user can observe that even though the content of the div element does not overflow, it displays scroll bars.
<html>
<head>
<style>
.main {
height: 200px;
width: 300px;
font-size: 1rem;
overflow: scroll;
border: 2px solid blue;
}
</style>
</head>
<body>
<h2> <i> overflow: scroll </i> in CSS </h2>
<div class = "main">
<p> This is a content. </p>
<p> This is a content. </p>
<p> This is a content. </p>
<p> This is a content. </p>
</div>
</body>
</html>
Difference between overflow:auto and overflow:scroll
This is the difference table for the overflow:auto and overflow:scroll CSS properties.
Overflow: Automatic |
Overflow:Scroll |
|---|---|
Display scroll bars only when the content of an HTML element overflows or does not fit within the dimensions of the original element. |
It always shows scrollbars. |
Example
In the following example, we demonstrate the output of overflow:scroll and overflow:automatic together. We set overflow:scroll for the div element with the class name "scroll" and set overflow:auto for the div element with the class name "auto".
In the output, the user can observe that overflow:scroll displays the scrollbar, but does not display overflow:auto.
<html>
<head>
<style>
.scroll {
height: 220px;
width: 500px;
font-size: 1rem;
overflow: scroll;
border: 2px solid blue;
}
.auto {
height: 200px;
width: 500px;
overflow: auto;
border: 3px dotted red;
margin: 10px;
}
</style>
</head>
<body>
<h2> Difference between overflow: scroll and overflow: auto in CSS</h2>
<div class = "scroll">
<p> overflow: scroll. </p>
<p> overflow: scroll. </p>
<p> overflow: scroll. </p>
<p> overflow: scroll. </p>
<p> overflow: scroll. </p>
</div>
<div class = "auto">
<p> overflow: auto. </p>
<p> overflow: auto. </p>
<p> overflow: auto. </p>
<p> overflow: auto. </p>
<p> overflow: auto. </p>
</div>
</body>
</html>
Users learned the difference between the "overflow:auto" and "overflow:scroll" CSS properties. The only difference between the two is when it shows scrollbars.
The above is the detailed content of What is the difference between overflow: auto and overflow: scroll in CSS?. For more information, please follow other related articles on the PHP Chinese website!