1、HTML部分
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>后台管理系统的布局框架</title> <link rel="stylesheet" href="../css/test.css" type="text/css"> </head> <body> <div class="top">上</div> <div class="main"> <div class="mainLeft">左</div> <div class="mainContent"> 正文内容 </div> </div> <div class="foot">下</div> </body> </html>2、less部分
html,body,p{ margin: 0; padding: 0; } .top{ width: 100%; position: fixed; top:0; z-index: 1; height:60px; background:darkred; } .main{ .mainLeft{ position: fixed; top:60px; left: 0; bottom: 0; background: #2a6496; width: 200px; z-index: 9; } .mainContent{ margin-top:60px; padding-bottom: 100px; /*height: 120%;*/ margin-left: 200px; background: #2aabd2; } } .foot{ position:fixed;//页面内容不足屏幕高度时 //position:relative;//页面内容高度大于屏幕高度时 width: 100%; z-index: 1; bottom: 0; height: 100px; background: #3c3c3c; }