overflow-y

overflow-y

CSS overflow-y Property

The CSS overflow-y property is used to specify how content inside of an element should be clipped along the Y axis, which is the vertical plane. If you set the height of an element, and the height of the content inside of that element happens to exceed the height of its parent, use overflow-y to handle how the overflowing content is treated.

CSS CODE EXAMPLE

<style type="text/css">
div#myDiv {
    height: 80px;
    overflow-y: auto;
}
</style>
<div id="myDiv">
  ABCDEFGHIJKLMNOPQRSTUVWXYZ
  <hr />
  ABCDEFGHIJKLMNOPQRSTUVWXYZ
  <hr />
  ABCDEFGHIJKLMNOPQRSTUVWXYZ
  <hr />
  ABCDEFGHIJKLMNOPQRSTUVWXYZ
</div>

 

ABCDEFGHIJKLMNOPQRSTUVWXYZ

---

ABCDEFGHIJKLMNOPQRSTUVWXYZ

---

ABCDEFGHIJKLMNOPQRSTUVWXYZ

---

ABCDEFGHIJKLMNOPQRSTUVWXYZ

Possible Values:

auto
This setting will make a scroll bar appear only if the content requires it.
scroll
This setting will make a scroll bar appear.
visible
This setting will make no scroll bar and will not hide the overflow content.
hidden
This setting will make no scroll bar and will hide the overflow content.

Related Material

overflow-x
overflow

click here to code. 

Tweet