如何使用CSS使div垂直滚动（） _div垂直滚动

使用CSS溢出属性使div垂直滚动变得容易。溢出属性中有不同的值。例如：overflow：auto; 和轴隐藏程序, 例如overflow-x：hidden; 并溢出-y：auto; 。它将使垂直和水平滚动条, 而自动将仅使垂直滚动条。
对于垂直滚动条, 请使用x和y轴。设置overflow-x：hidden; 和溢出-y：auto; 会自动隐藏水平滚动条, 仅显示垂直滚动条。在这里, 滚动div可以垂直滚动。
范例1：

< !DOCTYPE html> < html > < head > < style > h1 { color:Green; } div.scroll { margin:4px, 4px; padding:4px; background-color: green; width: 500px; height: 110px; overflow-x: hidden; overflow-y: auto; text-align:justify; } < / style > < / head > < body > < center > < h1 > lsbin< / h1 > < div class = "scroll" > It is a good platform to learn programming. It is an educational website. Prepare for the Recruitment drive of product based companies like Microsoft, Amazon, Adobe etc with a free online placement preparation course. The course focuses on various MCQ's & Coding question likely to be asked in the interviews & make your upcoming placement season efficient and successful. Also, any geeks can help other geeks by writing articles on the lsbin, publishing articles follow few steps that are Articles that need little modification/improvement from reviewers are published first. To quickly get your articles reviewed, please refer existing articles, their formatting style, coding style, and try to make you are close to them. In case you are a beginner, you may refer Guidelines to write an Article < / div > < / center > < / body > < / html >

输出如下：

文章图片
范例2：在此示例中, 使用auto代替overflow-x：hidden; 。和溢出-y：auto; 使div垂直滚动。

< !DOCTYPE html> < html > < head > < style > h1 { color:Green; } div.gfg { margin:5px; padding:5px; background-color: green; width: 500px; height: 110px; overflow: auto; text-align:justify; } < / style > < / head > < body > < center > < h1 > lsbin< / h1 > < div class = "gfg" > It is a good platform to learn programming. It is an educational website. Prepare for the Recruitment drive of product based companies like Microsoft, Amazon, Adobe etc with a free online placement preparation course. The course focuses on various MCQ's & Coding question likely to be asked in the interviews & make your upcoming placement season efficient and successful. Also, any geeks can help other geeks by writing articles on the lsbin, publishing articles follow few steps that are Articles that need little modification/improvement from reviewers are published first. To quickly get your articles reviewed, please refer existing articles, their formatting style, coding style, and try to make you are close to them. In case you are a beginner, you may refer Guidelines to write an Article < / div > < / center > < / body > < / html >

【如何使用CSS使div垂直滚动（）】输出如下：