CSS Scrollbars

CSS Tutorial

CSS-Home CSS-Environment CSS-Basic syntax CSS-Selector CSS-How To Add CSS CSS-Comment CSS-Color CSS-Background CSS-Font CSS-Text CSS-Boarder CSS-Margin CSS-Padding CSS-Height/Width CSS-Link CSS-Table CSS-Visibility CSS-Scrollable CSS-Float/Clear CSS-Line CSS-Align CSS-Dimension CSS-Event CSS-Pusedo class CSS-Position CSS-Transparency CSS-Dropdown CSS-Form CSS-List/Counter CSS-Website layout CSS-Text effect CSS-Image effect CSS-Button effect CSS-page number CSS-Box CSS-@media CSS-Multi device CSS-Multi device 1 CSS-Multi device 2

« Previous Next »

The CSS overflow property specifies how to handle the content when it overflows its block.

CSS provides overflow property tells the browser what to do if the box's contents is larger than the box itself.

The overflow property can take the following values −

visible : It is default value. It specifies that overflow is not clipped.The content renders outside the element's box

hidden : It specifies that the overflow is clipped, and rest of the content will be invisible.

scroll : It specifies that the overflow is clipped, and a scroll bar is used to see the rest of the content.

auto : It specifies that if overflow is clipped, a scroll bar is needed to see the rest of the content.

Example : CSS - Scrollbars

<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: #eee;
width: 200px;
height: 80px;
border: 1px dotted black;
overflow: hidden;
}

h6 {
background-color: #eee;
width: 200px;
height: 50px;
border: 1px dotted black;
overflow: scroll;
}
</style>
</head>
<body>

<h6> The CSS overflow property specifies how to handle the content when
it overflows its block.CSS provides overflow property tells the browser what to do
if the box's contents is larger than the box itself.
</h6>
<div> The CSS overflow property specifies how to handle the content when
it overflows its block.CSS provides overflow property tells the browser what to do
if the box's contents is larger than the box itself.
</div>

</body>
</html>

When the above code is compiled , it produces the following result.

Result

The CSS overflow property specifies how to handle the content when it overflows its block.

CSS provides overflow property tells the browser what to do if the box's contents is larger than the box itself.

« Previous Next »

C++ Tutorial	CSS Tutorial	C# Tutorial	PHP Tutorial
Java Tutorial	SQL Tutorial	JQuery Tutorial	MySQL Tutorial
HTML - Tutorial	Node.Js Tutorial	JavaScript Tutorial	Python Tutorial
MySQL Installation	Node.js Installation	XAMPP -- Installation	Python Installation
C++ - Environment Setup	Java - Environment Setup	C# - Environment Setup	Responsive Web Design