充满布局

从46版本开始，系统提供“弹性布局”组件，实现充满布局，如下图所示

系统提供“分割面板”，实现左右分栏，中间的分割线支持左右拖动，改变左右分栏的宽度，如下图所示

实现充满布局

页面组件设置

页面 page 组件设置“自动充满”属性为“是”，表示页面高度自动充满

弹性布局组件设置

弹性布局组件的属性设置如下

• “主轴方向垂直”属性选择“是”，表示弹性布局组件中的组件垂直排列
• "自动充满模式"属性选择"第二个元素充满"，如下图所示，弹性布局组件中共有3个元素，分别是工具栏、表格和分页，表格就是第二个元素，这样设置后表格的高度会自动充满
• “间隙”属性选择“中”，表示每两个元素垂直方向上有16 px 的间距

表格组件设置

表格组件设置“纵向滚动高度”属性，实现表头固定效果。弹性布局组件提供 css 变量 --flex-auto-fill-size 表示自动充满区域的高度（主轴方向垂直时），用这个高度减去表格的表头高度、总结栏高度等，就是表格纵向滚动高度。例如默认大小的表格的表头高度是55 px，表格的纵向滚动高度为：

calc(var(--flex-auto-fill-size) - 55px)

设置表格的“纵向滚动高度”属性，如下图所示，注意字符串需要使用双引号括起来

实现左右分栏的充满布局

实现充满布局的方法和前面介绍的一样，只是在页面上先添加“分割面板”组件，在两个分割面板项中再添加“弹性布局”组件。

分割面板项的“高度样式”设置为充满，如下图所示

特别说明 Antd 组件默认为流式布局，即组件的高度是由内部组件的高度撑出来的，设置 height:100% 也不起作用，弹性布局组件放在这种组件中也会失效

上面案例中使用了样式设置页面白色背景以及内边距，样式参考如下

    .c-page,//页面
    .css-glamorous-div--jgd0xx>div:first-child,//分割面板左分栏
    .css-glamorous-div--jgd0xx>div:last-child,//分割面板右分栏
    {
        background-color: var(--ant-color-bg-base);
        padding: 20px 24px;
    }