🧪 两栏布局测试页面
导航项1导航项2导航项3
左侧栏

功能模块1

这是左侧栏的第一个功能模块

功能模块2

这是左侧栏的第二个功能模块

功能模块3

这是左侧栏的第三个功能模块

右侧主内容区 - 测试滚动功能

内容卡片1

这是右侧主内容区的第一个内容卡片,展示了布局组件的使用效果。

内容卡片2

这是右侧主内容区的第二个内容卡片,展示了布局组件的使用效果。

内容卡片3

这是右侧主内容区的第三个内容卡片,展示了布局组件的使用效果。

内容卡片4

这是右侧主内容区的第四个内容卡片,展示了布局组件的使用效果。

布局特性说明

  • • 顶部导航栏悬浮在页面上方,固定位置
  • • 左侧栏展开/收起按钮,支持动态切换左侧栏显示状态
  • • 左侧栏宽度固定为300px,高度填充整个窗口
  • • 右侧主内容区自适应宽度,高度填充整个窗口
  • • 右侧栏现在支持垂直滚动!左侧栏保持固定
  • • 支持明暗主题切换

滚动测试内容 1

这是第 1 个滚动测试内容,用来验证右侧栏的垂直滚动功能是否正常工作。

当内容超出容器高度时,应该出现滚动条,允许用户上下滚动查看所有内容。

滚动测试内容 2

这是第 2 个滚动测试内容,用来验证右侧栏的垂直滚动功能是否正常工作。

当内容超出容器高度时,应该出现滚动条,允许用户上下滚动查看所有内容。

滚动测试内容 3

这是第 3 个滚动测试内容,用来验证右侧栏的垂直滚动功能是否正常工作。

当内容超出容器高度时,应该出现滚动条,允许用户上下滚动查看所有内容。

滚动测试内容 4

这是第 4 个滚动测试内容,用来验证右侧栏的垂直滚动功能是否正常工作。

当内容超出容器高度时,应该出现滚动条,允许用户上下滚动查看所有内容。

滚动测试内容 5

这是第 5 个滚动测试内容,用来验证右侧栏的垂直滚动功能是否正常工作。

当内容超出容器高度时,应该出现滚动条,允许用户上下滚动查看所有内容。

滚动测试内容 6

这是第 6 个滚动测试内容,用来验证右侧栏的垂直滚动功能是否正常工作。

当内容超出容器高度时,应该出现滚动条,允许用户上下滚动查看所有内容。

滚动测试内容 7

这是第 7 个滚动测试内容,用来验证右侧栏的垂直滚动功能是否正常工作。

当内容超出容器高度时,应该出现滚动条,允许用户上下滚动查看所有内容。

滚动测试内容 8

这是第 8 个滚动测试内容,用来验证右侧栏的垂直滚动功能是否正常工作。

当内容超出容器高度时,应该出现滚动条,允许用户上下滚动查看所有内容。

滚动测试内容 9

这是第 9 个滚动测试内容,用来验证右侧栏的垂直滚动功能是否正常工作。

当内容超出容器高度时,应该出现滚动条,允许用户上下滚动查看所有内容。

滚动测试内容 10

这是第 10 个滚动测试内容,用来验证右侧栏的垂直滚动功能是否正常工作。

当内容超出容器高度时,应该出现滚动条,允许用户上下滚动查看所有内容。

滚动测试内容 11

这是第 11 个滚动测试内容,用来验证右侧栏的垂直滚动功能是否正常工作。

当内容超出容器高度时,应该出现滚动条,允许用户上下滚动查看所有内容。

滚动测试内容 12

这是第 12 个滚动测试内容,用来验证右侧栏的垂直滚动功能是否正常工作。

当内容超出容器高度时,应该出现滚动条,允许用户上下滚动查看所有内容。

滚动测试内容 13

这是第 13 个滚动测试内容,用来验证右侧栏的垂直滚动功能是否正常工作。

当内容超出容器高度时,应该出现滚动条,允许用户上下滚动查看所有内容。

滚动测试内容 14

这是第 14 个滚动测试内容,用来验证右侧栏的垂直滚动功能是否正常工作。

当内容超出容器高度时,应该出现滚动条,允许用户上下滚动查看所有内容。

滚动测试内容 15

这是第 15 个滚动测试内容,用来验证右侧栏的垂直滚动功能是否正常工作。

当内容超出容器高度时,应该出现滚动条,允许用户上下滚动查看所有内容。

滚动测试内容 16

这是第 16 个滚动测试内容,用来验证右侧栏的垂直滚动功能是否正常工作。

当内容超出容器高度时,应该出现滚动条,允许用户上下滚动查看所有内容。

滚动测试内容 17

这是第 17 个滚动测试内容,用来验证右侧栏的垂直滚动功能是否正常工作。

当内容超出容器高度时,应该出现滚动条,允许用户上下滚动查看所有内容。

滚动测试内容 18

这是第 18 个滚动测试内容,用来验证右侧栏的垂直滚动功能是否正常工作。

当内容超出容器高度时,应该出现滚动条,允许用户上下滚动查看所有内容。

滚动测试内容 19

这是第 19 个滚动测试内容,用来验证右侧栏的垂直滚动功能是否正常工作。

当内容超出容器高度时,应该出现滚动条,允许用户上下滚动查看所有内容。

滚动测试内容 20

这是第 20 个滚动测试内容,用来验证右侧栏的垂直滚动功能是否正常工作。

当内容超出容器高度时,应该出现滚动条,允许用户上下滚动查看所有内容。

🎉 滚动测试完成

如果您能看到这个内容,说明右侧栏的滚动功能已经正常工作了! 左侧栏保持固定,右侧栏可以滚动查看所有内容。