页面html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> <title>首页</title> <link href="/Content/site.css" rel="stylesheet"/> <link href="/Content/themes/base/layout.css" rel="stylesheet"/> </head> <body> <div class="ui-layout-header ui-bb"> </div> <div class="ui-layout-wrapper"> <div class="ui-layout-slide"> </div> <div class="ui-layout-content"> </div> </div> <div class="ui-layout-footer"> </div> </body> </html>
CSS
* { height: 100%; margin: 0px; padding: 0px; box-sizing: border-box; -moz-box-sizing: border-box; /* Firefox */ -webkit-box-sizing: border-box; /* Safari */ } .ui-layout-header { height: 50px; margin-bottom: -50px; position: relative; } .ui-layout-wrapper { padding-top: 50px; min-height: 100%; height: 100% !important; height: 100%; background-color: ActiveBorder; padding-bottom: -30px; } .ui-layout-wrapper .ui-layout-slide { width: 220px; min-height: 100%; float: left; margin-right: 100%; background-color: aqua; } .ui-layout-wrapper .ui-layout-content { width: 100%; } .ui-layout-wrapper .ui-layout-content .ui-layout-incontent { margin-left: 220px; background-color: red; } .ui-layout-footer { margin-top: -30px; height: 30px; background-color: red; position: relative; z-index: 100; }