<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>flex布局实现后台页面</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
.frame-header {
height: 60px;
background-color: #23262E;
}
.frame-body {
position: fixed;
top: 60px;
right: 0;
bottom: 0;
left: 0;
display: flex;
flex-direction: row;
}
.frame-side {
scrollbar-width: none; /* firefox隐藏滚动条 */
-ms-overflow-style: none; /* IE 10+隐藏滚动条 */
overflow-x: hidden;
overflow-y: auto;
width: 200px;
background-color:#393D49;
}
.frame-side::-webkit-scrollbar {
display: none; /* Chrome Safari 隐藏滚动条*/
}
.frame-main {
flex-grow: 1;
background-color:#666;
}
</style>
</head>
<body>
<div class="frame-header">
<h1 >header</h1>
</div>
<div class="frame-body">
<div class="frame-side">
<ul >
<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>
<li><a href="main.html" target="main">链接1</a></li>
<li><a href="main.html" target="main">链接2</a></li>
<li><a href="main.html" target="main">链接1</a></li>
<li><a href="main.html" target="main">链接2</a></li>
<li><a href="main.html" target="main">链接1</a></li>
<li><a href="main.html" target="main">链接2</a></li>
<li><a href="main.html" target="main">链接1</a></li>
<li><a href="main.html" target="main">链接2</a></li>
<li><a href="main.html" target="main">链接1</a></li>
<li><a href="main.html" target="main">链接2</a></li>
<li><a href="main.html" target="main">链接1</a></li>
<li><a href="main.html" target="main">链接2</a></li>
<li><a href="main.html" target="main">链接1</a></li>
<li><a href="main.html" target="main">链接2</a></li>
<li><a href="main.html" target="main">链接1</a></li>
<li><a href="main.html" target="main">链接2</a></li>
<li><a href="main.html" target="main">链接1</a></li>
<li><a href="main.html" target="main">链接2</a></li>
<li><a href="main.html" target="main">链接1</a></li>
<li><a href="main.html" target="main">链接2</a></li>
<li><a href="main.html" target="main">链接1</a></li>
<li><a href="main.html" target="main">链接2</a></li>
<li><a href="main.html" target="main">链接1</a></li>
<li><a href="main.html" target="main">链接2</a></li>
<li><a href="main.html" target="main">链接1</a></li>
<li><a href="main.html" target="main">链接2</a></li>
<li><a href="main.html" target="main">链接1</a></li>
<li><a href="main.html" target="main">链接2</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 class="frame-main">
<!-- 内容主体区域 -->
<iframe name="main" src="main.html" width="100%" height="100%" frame></iframe>
</div>
</div>
</body>
</html>