In order to access this site you need to enable JavaScript!

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>

Copy Code

Preview

Syntax Highlighter

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>

Copy Code

Preview

Syntax Highlighter

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>

Copy Code

Preview

Syntax Highlighter

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>