1. 首页
  2. 卡片 Card
  3. card-full 满宽分割

卡片 · card-full 满宽分割

卡片家族 索引 base cpanel crumb full page border radius api artic namecode imgs tips total default box checkbox form form-item form-inpselect table pager multipled menubar mode menus tabmenu code json template tab slide paginate tree toggle marquee timeaxis waterfall popup nav chatbox drag choose progress roll
满宽分割卡：flex 纵向三区——card-head / card-foot 固定高度，card-body flex:auto 且纵向滚动。配合固定高度父容器（如侧栏 col + hgp-100）可把区域撑满。
本页内容 结构用法 组合：侧栏 / cpanel full-centor 居中

结构用法

<div class="card card-full"> <div class="card-head">固定顶部</div> <div class="card-body">主体区域，overflow-y:auto</div> <div class="card-foot">固定底部</div> </div>

组合：侧栏 / cpanel

<aside class="col-sm-12 col-md-3 col-lg-3 col-xl-2 hgp-100 overflow-auto"> <div class="card card-cpanel card-full"> <div class="card-head">侧栏</div> <div class="card-body">滚动内容</div> </div> </aside>

full-centor 居中

<div class="card card-full full-centor"> <div class="card-head">顶部占位</div> <div class="card-body">垂直居中的主体</div> <div class="card-foot">底部占位</div> </div>
上一张（循环） card-crumb 面包屑
下一张 card-page 页面网格
KuoqiUI v2.00 · 离线静态文档 · 界面基于 KuoqiUI · 返回首页