HTML如何给页面设置滚动条 (简单，通俗易懂)

原创于 2023-03-20 14:47:06 发布 · 1.5w 阅读

33 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#css #css3 #html

当页面可视窗口小于内容大小时，可通过在最外层盒子上加overflow: scroll，并设置固定高度，来实现页面滚动效果。

该文章已生成可运行项目，

当页面中给定一定大小的可视窗口时，而内容的大小是比可视窗口大的时候，这时候则需要，是页面实现滚动效果：

此时需要在最外层的盒子上面加上 overflow: scroll，并且给高度设置死，及固定高度。

.rigth-content-bottom{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  margin: 2px;
  margin-top: 16px;
  //这下面的两段代码是最主要的
  overflow: scroll;
  height: 840px;
}

此时就实现了页面的滚动效果

本文章已经生成可运行项目