You are here: Reference > CSS > properties > overflow

overflow property

Browser support:
Specifies what to do with content outside the element's rendering area.
If an element's dimensions are set with any of the width and height properties, and the contents are larger than the specified area, with the overflow property you have control over how the overflowed content is handled.

If you want to hide the scrollbars of the entire document, use the overflow style property of the body or the html element. See Example 2 and 3 for details.

JavaScript page for this property: overflow. You can find other example(s) there.

Possible values:

 One of the following values: 
-moz-hidden-unscrollable
Content outside the element's box is not shown.
-moz-scrollbars-horizontal
Deprecated. Content is clipped when necessary, but scroll bars are always added.
-moz-scrollbars-none
Deprecated. Content is clipped and scroll bars are added only when necessary.
-moz-scrollbars-vertical
Deprecated. Content is clipped when necessary, but scroll bars are always added.
-webkit-marquee
The contents scroll inside the element's box.
auto
Content is clipped and scroll bars are added when necessary.
hidden
Content outside the element's box is not shown.
inherit
Takes the value of this property from the computed style of the parent element.
overlay
Content is clipped and scroll bars are added when necessary.
scroll
Content is clipped when necessary, but scroll bars are always added.
visible
Default. Content is not clipped.
Default: visible.

Example HTML code 1:

This example illustrates the use of the overflow property:
<head>
    <style>
        .example {
            overflow: auto;
            background-color: #F9F9F9;
            width: 200px;
            height: 150px;
        }
    </style>
</head>
<body>
    <div class="example">
        The overflow property determines what to do with content outside the element's rendering area.<br />
        The overflow property determines what to do with content outside the element's rendering area.<br />
        The overflow property determines what to do with content outside the element's rendering area.<br />
        The overflow property determines what to do with content outside the element's rendering area.<br />
        The overflow property determines what to do with content outside the element's rendering area.<br />
        The overflow property determines what to do with content outside the element's rendering area.<br />
        The overflow property determines what to do with content outside the element's rendering area.<br />
    </div>
</body>
Did you find this example helpful? yes no

Example HTML code 2:

This example uses the scroll attribute and the overflow style property of the body to hide the scrollbars of the document in all commonly used browsers:
<head>
    <style>
        body {
            overflow: hidden;
        }
    </style>
</head>
<body scroll="no">
    <div style="width:600px; height:1000px; background-color:#a0c0a0;">
        Resize the window, the scrollbars won't be visible.
    </div>
</body>
Did you find this example helpful? yes no

Example HTML code 3:

This example is the same as the previous one, but it uses the overflow style property of the html element to hide the scrollbars of the document in all browsers:
<head>
    <style>
        html {
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div style="width:600px; height:1000px; background-color:#a0c0a0;">
        Resize the window, the scrollbars won't be visible.
    </div>
</body>
Did you find this example helpful? yes no

Example HTML code 4:

This example shows how to force the document's scrollbars to be always visible:
<head>
    <style>
        html {
            overflow: scroll;
        }
    </style>
</head>
<body>
    <div style="width:600px; background-color:#a0c0a0;">
        Resize the window, the scrollbars will be always visible.
    </div>
</body>
Did you find this example helpful? yes no

Supported by tags:

Related pages:

External links:

User Contributed Comments

Post Content

Post Content