布局组件定头定底

场景描述

有些页面，希望实现固定头部、固定底部，中间撑满，内容多时可滚动的效果，如下图所示

实现思路

在界面上放布局组件，通过设置样式实现

实现步骤

在 page 上增加 c-full 样式

案例1 内容区域放一个表格

运行效果如第一幅图所示。设置页面高度100%、布局高度100%，表格高度100%且出滚动条，css代码如下

.c-full{
    height:100% !important;

    :global{
        .ant-layout{
            height:100%;
        };
        .ant-table-wrapper{
            height:100%;
            overflow: auto;
        };
    }
}

案例2 内容区域放一个区块

运行效果如下图所示

设置页面高度100%、布局高度100%，布局的内容区域显示滚动条，css代码如下

.c-full{
    height:100% !important;

    :global{
        .ant-layout{
            height:100%;
        };
        .ant-layout-content{
            overflow: auto;
        };
    }
}

案例3 内容区域放一个行列

运行效果如下图所示，每列单独滚动

设置页面高度100%、布局高度100%，布局的内容区域显示滚动条，行和列的高度100%，列显示滚动条，css代码如下

.c-full{
    height:100% !important;

    :global{
        .ant-layout{
            height:100%;
        };
        .ant-layout-content{
            overflow: auto;
        };
        .ant-row{
            height:100%;
        }
        .ant-row .ant-col{
            height:100%;
            overflow: auto;
        };
    }
}