基本结构，分为上边，下左边，下右边
## 如图
## 代码
```
<!DOCTYPE html>
<html lang="zh_CN" style="overflow: hidden;">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="renderer" content="webkit">
<meta charset="utf-8">
<title>后台管理系统</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="http://hongweicdn.oss-cn-hangzhou.aliyuncs.com/simplebootadminindex.min.css">
</head>
<body style="min-width:900px;overflow: hidden;">
<!--navbar/start-->
<div class="navbar navbar-default" style="background: green">
<div class="container-fluid">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand" style="width:200px;color: white;text-align: center">后台管理中心</a>
</div>
<div class="navbar-collapse collapse" id="navbar-main">
<!--left/start-->
<div class="pull-left" style="position: relative;">
<a id="task-pre" class="task-changebt"><i class="fa fa-chevron-left"></i></a>
<div id="task-content">
<ul class="nav navbar-nav cmf-component-tab" id="task-content-inner">
<li><a class="cmf-tabs-item-text">首页</a></li>
</ul>
<div style="clear:both;"></div>
</div>
<a id="task-next" class="task-changebt"><i class="fa fa-chevron-right"></i></a>
</div>
<!--left/end-->
<!--right/start-->
<ul class="nav navbar-nav navbar-right simplewind-nav">
<li class="light-blue dropdown" style="border-left:none;">
<a data-toggle="dropdown" href="#" class="dropdown-toggle">
<span class="user-info">管理员</span>
<i class="fa fa-caret-down"></i>
</a>
<ul class="user-menu pull-right dropdown-menu dropdown-yellow dropdown-caret dropdown-closer">
<li><a href="#"><i class="fa fa-cog"></i> 网站信息</a></li>
<li><a href="#"><i class="fa fa-user"></i> 修改信息</a></li>
<li><a href="#"><i class="fa fa-lock"></i> 修改密码</a></li>
<li><a href="#"><i class="fa fa-sign-out"></i> 退出</a></li>
</ul>
</li>
</ul>
<!--right/end-->
</div>
</div>
</div>
<!--navbar/end-->
<div class="main-container container-fluid" id="main-container">
<!--left/start-->
<div class="sidebar" id="sidebar">
左边
</div>
<!--left/right-->
<!--main/stat-->
<div class="main-content">
右边<br/>
右边<br/>
右边<br/>
右边<br/>
右边<br/>
右边<br/>
右边<br/>
</div>
<!--main/end-->
</div>
<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
//重置容器的高度
var mainContainer;
var headerHeight;
$(function () {
mainContainer = $("#main-container");
headerHeight = 48;
mainContainer.height($(window).height() - headerHeight);
$(window).resize(function () {
mainContainer.height($(window).height() - headerHeight);
});
})
</script>
</body>
</html>
```
