Core CSS

Handling Overflow for Setting Scrollbars

This CSS Reference page illustrates how the overflow setting can be used display content and provide scrollbars. There are five basic settings for the overflow value: visible, auto, hidden, scroll, and clip. Since clip is nearly the same as hidden, only the first four settings are displayed below. The clip setting disables scrolling, even programmatically. The default overflow value is visible.

Setting the overflow value to visible, makes the inner content visible outside the containing element; notice how the content extends over the border of its container. The overflow value auto, automatically adds scrollbars whereever the content extends beyond the bounds of the container. Since this first example is longer in both the width and height , both a vertical and a horizontal scrollbar are added. The overflow value hidden just hides any content that extends beyond the element and provides no scrollbars. The value scroll adds scrollbars whether they are needed or not; compare the first and second row, where the content is shorter than the container.

Just as the overflow can be set for both the height nad width, we can set each one individually by using the overflow-x and overflow-y attributes. Notice that these settings may affect the default value of the other one.

Overflow.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net's CSS: Handling Overflow for Setting Scrollbars</title>
    <style>
        .cHolder {
          width: 220px;
          background-color:beige;
          float: left;
          border: 1px lightgray solid;
        }
        .cOverflow {
          width: 190px;
          height: 150px;
          margin: 10px;
          border: 5px gray solid;
        }
        .cOverflow2 {
          width: 190px;
          height: 180px;
          margin: 10px;
          border: 5px gray solid;
        }
        .cHeading {
          text-align: center;
        }
        .cRow {
          width:888px;
          margin-bottom:20px;
          display:inline-block;
        }
    </style>
  </head>
  <body>
    <div class="cRow">
      <h2 class="cHeading">Short and Narrow Container</h2>
      <div class="cHolder">
        <pre style="text-align:center;">overflow:visible;</pre>
        <div class="cOverflow" style="overflow:visible;"><img
        src="ChristHealingTheSick_CarlHeinrichBloch_200x159.png"
        alt="Christ Healing the Sick by Carl Heinrich Bloch" /></div>
      </div>
      <div class="cHolder">
        <pre style="text-align:center;">overflow:auto;</pre>
        <div class="cOverflow" style="overflow:auto;"><img
	    src="ChristHealingTheSick_CarlHeinrichBloch_200x159.png"
        alt="Christ Healing the Sick by Carl Heinrich Bloch" /></div>
      </div>
      <div class="cHolder">
        <pre style="text-align:center;">overflow:hidden;</pre>
        <div class="cOverflow" style="overflow:hidden;"><img
	    src="ChristHealingTheSick_CarlHeinrichBloch_200x159.png"
        alt="Christ Healing the Sick by Carl Heinrich Bloch" /></div>
      </div>
      <div class="cHolder">
        <pre style="text-align:center;">overflow:scroll;</pre>
        <div class="cOverflow" style="overflow:scroll;"><img
	    src="ChristHealingTheSick_CarlHeinrichBloch_200x159.png"
        alt="Christ Healing the Sick by Carl Heinrich Bloch" /></div>
      </div>
    </div>
    <!-- Overflow 2 -->
    <div class="cRow">
      <h2 class="cHeading">Taller Container with No Vertical Overflow</h2>
      <div class="cHolder">
        <pre style="text-align:center;">overflow:visible;</pre>
        <div class="cOverflow2" style="overflow:visible;"><img
        src="ChristHealingTheSick_CarlHeinrichBloch_200x159.png"
        alt="Christ Healing the Sick by Carl Heinrich Bloch" /></div>
      </div>
      <div class="cHolder">
        <pre style="text-align:center;">overflow:auto;</pre>
        <div class="cOverflow2" style="overflow:auto;"><img
	    src="ChristHealingTheSick_CarlHeinrichBloch_200x159.png"
        alt="Christ Healing the Sick by Carl Heinrich Bloch" /></div>
      </div>
      <div class="cHolder">
        <pre style="text-align:center;">overflow:hidden;</pre>
        <div class="cOverflow2" style="overflow:hidden;"><img
	    src="ChristHealingTheSick_CarlHeinrichBloch_200x159.png"
        alt="Christ Healing the Sick by Carl Heinrich Bloch" /></div>
      </div>
      <div class="cHolder">
        <pre style="text-align:center;">overflow:scroll;</pre>
        <div class="cOverflow2" style="overflow:scroll;"><img
	    src="ChristHealingTheSick_CarlHeinrichBloch_200x159.png"
        alt="Christ Healing the Sick by Carl Heinrich Bloch" /></div>
      </div>
    <div>
    <!-- Overflow X -->
    <div class="cRow">
      <h2 class="cHeading">Overflow X on the Taller Container</h2>
      <div class="cHolder">
        <pre style="text-align:center;">overflow-x:visible;</pre>
        <div class="cOverflow2" style="overflow-x:visible;"><img
        src="ChristHealingTheSick_CarlHeinrichBloch_200x159.png"
        alt="Christ Healing the Sick by Carl Heinrich Bloch" /></div>
      </div>
      <div class="cHolder">
        <pre style="text-align:center;">overflow-x:auto;</pre>
        <div class="cOverflow2" style="overflow-x:auto;"><img
	    src="ChristHealingTheSick_CarlHeinrichBloch_200x159.png"
        alt="Christ Healing the Sick by Carl Heinrich Bloch" /></div>
      </div>
      <div class="cHolder">
        <pre style="text-align:center;">overflow-x:hidden;</pre>
        <div class="cOverflow2" style="overflow-x:hidden;"><img
	    src="ChristHealingTheSick_CarlHeinrichBloch_200x159.png"
        alt="Christ Healing the Sick by Carl Heinrich Bloch" /></div>
      </div>
      <div class="cHolder">
        <pre style="text-align:center;">overflow-x:scroll;</pre>
        <div class="cOverflow2" style="overflow-x:scroll;"><img
	    src="ChristHealingTheSick_CarlHeinrichBloch_200x159.png"
        alt="Christ Healing the Sick by Carl Heinrich Bloch" /></div>
      </div>
    <div>
    <!-- Overflow Y -->
    <div class="cRow">
      <h2 class="cHeading">Overflow Y on the Taller Container</h2>
      <div class="cHolder">
        <pre style="text-align:center;">overflow-y:visible;</pre>
        <div class="cOverflow2" style="overflow-y:visible;"><img
        src="ChristHealingTheSick_CarlHeinrichBloch_200x159.png"
        alt="Christ Healing the Sick by Carl Heinrich Bloch" /></div>
      </div>
      <div class="cHolder">
        <pre style="text-align:center;">overflow-y:auto;</pre>
        <div class="cOverflow2" style="overflow-y:auto;"><img
	    src="ChristHealingTheSick_CarlHeinrichBloch_200x159.png"
        alt="Christ Healing the Sick by Carl Heinrich Bloch" /></div>
      </div>
      <div class="cHolder">
        <pre style="text-align:center;">overflow-y:hidden;</pre>
        <div class="cOverflow2" style="overflow-y:hidden;"><img
	    src="ChristHealingTheSick_CarlHeinrichBloch_200x159.png"
        alt="Christ Healing the Sick by Carl Heinrich Bloch" /></div>
      </div>
      <div class="cHolder">
        <pre style="text-align:center;">overflow-y:scroll;</pre>
        <div class="cOverflow2" style="overflow-y:scroll;"><img
	    src="ChristHealingTheSick_CarlHeinrichBloch_200x159.png"
        alt="Christ Healing the Sick by Carl Heinrich Bloch" /></div>
      </div>
    <div>
  </body>
</html>
 

Output

Short and Narrow Container

overflow:visible;
Christ Healing the Sick by Carl Heinrich Bloch
overflow:auto;
Christ Healing the Sick by Carl Heinrich Bloch
overflow:hidden;
Christ Healing the Sick by Carl Heinrich Bloch
overflow:scroll;
Christ Healing the Sick by Carl Heinrich Bloch

Taller Container with No Vertical Overflow

overflow:visible;
Christ Healing the Sick by Carl Heinrich Bloch
overflow:auto;
Christ Healing the Sick by Carl Heinrich Bloch
overflow:hidden;
Christ Healing the Sick by Carl Heinrich Bloch
overflow:scroll;
Christ Healing the Sick by Carl Heinrich Bloch

Overflow X on the Taller Container

overflow-x:visible;
Christ Healing the Sick by Carl Heinrich Bloch
overflow-x:auto;
Christ Healing the Sick by Carl Heinrich Bloch
overflow-x:hidden;
Christ Healing the Sick by Carl Heinrich Bloch
overflow-x:scroll;
Christ Healing the Sick by Carl Heinrich Bloch

Overflow Y on the Taller Container

overflow-y:visible;
Christ Healing the Sick by Carl Heinrich Bloch
overflow-y:auto;
Christ Healing the Sick by Carl Heinrich Bloch
overflow-y:hidden;
Christ Healing the Sick by Carl Heinrich Bloch
overflow-y:scroll;
Christ Healing the Sick by Carl Heinrich Bloch
 
 

© 2007–2022 XoaX.net LLC. All rights reserved.