<!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 style="color:#FFF">header</h1>
  </div>
  <div class="frame-body">
      <div class="frame-side">
        <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>
            <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%" frameborder="0"></iframe>
    </div>
  </div>
</body>
</html>