How to Create a Vertically Scrolling Div in CSS?

Creating a Div with Vertical Scrolling in CSS

When creating a div that you want to be scrollable, it's important to understand the overflow property. By default, overflow: auto allows the content to extend beyond the boundaries of the div and creates scrollbars for both the horizontal and vertical axes. To restrict scrolling to only the vertical axis, you need to use overflow-y instead.

Overflow-y: Scroll

Using overflow-y: scroll forces a vertical scrollbar to appear, regardless of whether the content exceeds the div's height. This is useful when you want to ensure that the vertical scrollbar is always visible, even if the content doesn't extend beyond the div's height.

Overflow-y: Auto

If you want the vertical scrollbar to appear only when the content exceeds the div's height, use overflow-y: auto. This allows the content to break to the next line automatically when it reaches the end of the div, preventing the horizontal scrollbar from appearing. However, if the content exceeds the div's height, the vertical scrollbar will become visible.

Example Code

To create a div that can only be scrolled vertically, use the following CSS:

<pre class="brush:php;toolbar:false">
div {
  overflow-y: auto;
  height: 400px;
}

This code will result in a div that allows vertical scrolling when the content exceeds the div's height of 400px, while preventing horizontal scrolling.

The above is the detailed content of How to Create a Vertically Scrolling Div in CSS?. For more information, please follow other related articles on the PHP Chinese website!