Clipping regions and overflow

  • Article

You can set a clipping region for a positioned element by using the clip property. The clipping region defines a rectangle within which the element is visible. Any part of the element that extends outside the clipping region is clipped (that is, not displayed). The clipping region does not change the HTML; it only changes how the element is displayed.

Defining a clipping region

The following HTML code uses the clip property to define a clipping region for the absolutely positioned DIV element. The region, a 30-by-30 pixel square, displays only a part of the text; the rest is clipped from view, as demonstrated in the following example:

<html>
<head><title>Clip the div</title>
</head>
<body>
<div style="position: absolute; top: 50px; left: 50px; height: 100px;
    width: 100px; clip: rect(0 30 30 0); background-color: green;">
some content some content some content some content some content
some content some content some content some content some content
some content some content some content some content some content
some content some content 
</div>
</body>
</html>

Be careful when you define a clipping region; the parameter order (top, right, bottom, left) is important. For example, setting clip:rect to (0 0 30 30) causes the region not to display because the top and right properties have been defined as zero. The correct definition for a 30-by-30 clipping region based on the upper-left corner of the positioned object is to set clip:rect to (0 30 30 0).

You can change the clipping region dynamically by using the clip property, as demonstrated in the following example:

document.all.Mydiv.style.clip = "rect(0 50 75 0)";

Overflow

Overflow occurs when there is more content in a positioned element than can fit inside the area defined for it. By default, any extra content is displayed but flows beyond the end of the defined area, and it therefore may overlap other elements in the document. You can prevent this overflow by using the overflow property either to hide the overflow or to enable scroll bars to let the user view it by scrolling.

The following code sample uses the overflow property to enable scroll bars. Only the part of the text that fits inside the 100-by-100 area is initially displayed, but the user can view the rest by using the scroll bars:

<html>
<head><title>Scroll the Overflow</title>
</head>
<body>
<div style="position: absolute; top: 50px; left: 50px; height: 100px; width: 100px; overflow: scroll;">
some content some content some content some content some content
some content some content some content some content some content
some content some content some content some content some content
some content some content 
</div>
</body>
</html>

You can hide any overflow by setting the overflow property to hidden. Similarly, you can let the overflow flow beyond the end of the area by setting the overflow property to visible.

You can change the overflow dynamically by using the overflow property, as demonstrated in the following example:

if (document.all.Mydiv.style.overflow != "scroll")
    document.all.Mydiv.style.overflow = "scroll";

Send feedback about this topic to Microsoft. © 2011 Microsoft Corporation. All rights reserved.