How to Create a Vertically Scrollable Div with CSS?

Vertical Scrolling Div with CSS

Question:

How can I create a div that is only scrollable vertically using CSS?

Answer:

To vertically scroll a div, it is important to specify the overflow property with the correct value.

The syntax for overflow is as follows:

overflow: <value>;</value>

Where can be:

• visible: No scrollbars are displayed, even if the content overflows the div.
• hidden: Scrollbars are displayed only when the content overflows the div.
• scroll: Scrollbars are always displayed, even if the content does not overflow the div.
• auto: Scrollbars are displayed only when the content overflows the div in the specified direction.
• inherit: Inherits the overflow property from the parent element.

For vertical scrolling only:

• Use overflow-y: scroll; to force a vertical scrollbar to appear, regardless of whether the content exceeds the height of the div.
• Use overflow-y: auto; to display a vertical scrollbar only if the content overflow the height of the div.

For example, to create a div that is 400px high and only scrollable vertically:

<div></div>

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