<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Admin</title>
<style type="text/css">
*{
padding:0;
margin:0;
}
.frame-header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 60px;
z-index: 1000;
background-color: #23262E;
}
.frame-side {
position: fixed;
top: 60px;
left: 0;
bottom: 0;
width: 200px;
z-index: 999;
overflow-x: hidden;
}
.frame-side-scroll {
position: relative;
width: 220px;
height: 100%;
overflow-x: hidden;
background-color:#999;
}
.frame-main {
position: absolute;
left: 200px;
top: 60px;
right: 0;
bottom: 0;
z-index: 900;
width: auto;
height:auto;
box-sizing: border-box;
overflow:hidden;
/*padding-bottom: 44px;如果不需要页脚可以去掉*/
}
.frame-footer {
position: fixed;
left: 200px;
right: 0;
bottom: 0;
z-index: 990;
height: 44px;
line-height: 44px;
padding: 0 15px;
background-color: #FAFAFA;
display:none;/*如果需要页脚去掉可以去掉*/
}
</style>
</head>
<body>
<div class="frame-layout-admin">
<div class="frame-header">
<!-- 头部区域 -->
<h1 style="color:#FFF">header</h1>
</div>
<div class="frame-side">
<!-- 左侧区域 -->
<div class="frame-side-scroll">
<ul style="text-align:center;">
<li><a href="main.html" target="main">首页</a></li>
<li><a href="main.html" target="main">链接1</a></li>
<li><a href="main.html" target="main">链接2</a></li>
</ul>
</div>
</div>
<div class="frame-main">
<!-- 内容主体区域 -->
<iframe name="main" src="main.html" width="100%" height="100%" frameborder="0"></iframe>
</div>
<div class="frame-footer">
<!-- 页脚区域 -->
页脚区域
</div>
</div>
</body>
</html>