2023年6月20日发(作者：)

CSS布局--全屏-常见后台管理系统布局

完成如上图所⽰效果，代码如下： Document

　　.head{ height: 50px; background: #000; position: absolute; left: 220px; right: 0; } .left{ width: 220px; background:#de1; position: absolute; top: 0px; bottom: 0; } .right{ background:cyan; position: absolute; top: 50px; left: 220px; bottom: 60px; right: 0; } .foot{ position: absolute; left: 0; bottom: 0; width: 100%; height: 60px; background:#ccc; }

2023年6月20日发(作者：)

CSS布局--全屏-常见后台管理系统布局

完成如上图所⽰效果，代码如下： Document

　　.head{ height: 50px; background: #000; position: absolute; left: 220px; right: 0; } .left{ width: 220px; background:#de1; position: absolute; top: 0px; bottom: 0; } .right{ background:cyan; position: absolute; top: 50px; left: 220px; bottom: 60px; right: 0; } .foot{ position: absolute; left: 0; bottom: 0; width: 100%; height: 60px; background:#ccc; }