css 内容超出滚动条 |全屏导航divcss

/*添加滚动条*/
.overflow{
overflow: auto;/*添加滚动条*/
width: 500px;/*设置宽度*/
height: 200px;/*设置高度*/
}

在上述代码中，大家使用了CSS的overflow属性来添加滚动条，将其设置为auto，这样当内容超出显示范围时，滚动条就会自动出现，用户就可以通过滚动条来查看超出范围的内容。

除了auto之外，overflow属性还有其他的可选值：

/*设置隐藏超出范围的内容*/
.overflow{
overflow: hidden;
}
/*超出内容溢出到左侧*/
.overflow{
overflow: visible;
overflow-x: visible;
overflow-y: hidden;
}
/*超出内容溢出到右侧*/
.overflow{
overflow: visible;
overflow-x: hidden;
overflow-y: visible;
}
/*超出内容溢出到左右两侧*/
.overflow{
overflow: visible;
overflow-x: visible;
overflow-y: visible;
}
/*超出内容溢出到底部（下方）*/
.overflow{
overflow: scroll;
overflow-x: hidden;
overflow-y: visible;
}
/*超出内容溢出到顶部（上方）*/
.overflow{
overflow: scroll;
overflow-x: hidden;
overflow-y: visible;
scroll-behavior: smooth;
}

注意到在最后一个代码片段中，大家还设置了scroll-behavior: smooth属性，这样就可以让滚动条滚动时有平滑的效果，使用户体验更佳。

总的来说，通过使用CSS中的overflow属性，大家可以轻松地添加滚动条，让超出范围的内容在网页中得以显示。