大概效果：
整体可以有一个网站背景图
左侧菜单可以滚动，方便自行修改滚动条样式
左侧顶部logo不滚动，左侧底部缩进按钮不滚动
右侧顶部header不滚动，固定在最上面
右侧主题内容滚动
以下代码结构方便使用react vue等换肤
<div id="app">
<div id="theme" theme="white"></div>
</div>
效果图如下：
代码复制到任意.html文件，浏览器打开即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{margin: 0;color:#fff;}
h1{margin:0;}
#theme{
background-image: url(./bg.png) ;
position: relative;
}
.sider-layout{
position: fixed;
z-index: 99;
width: 300px;
opacity:0.6;
}
.logo{height:70px;border-right:1px solid #fff;}
.menu{
width: 300px;
}
.menu-scroll{
overflow-y: auto;
height: calc(100vh - 120px);
}
li{
background-color: blueviolet;
margin:0px 20px 20px 20px;
line-height: 200px;
word-wrap: break-word; word-break: normal;
}
.hidden-layout{
color: black;
background-color: #fff;
height: 50px;
}
.header-layout{
position: fixed;
top:0;
width: 100%;
z-index:98;
height: 70px;background-color: red;
opacity:0.6;
}
.header-content{
padding-left: 300px;
}
.content-layout{
overflow-y: auto;
width: 100%;
z-index: 97;
opacity:0.6;
}
.body-content{
padding-left: 300px;
padding-top:70px;
}
.page-container{
padding-left: 300px;
}
</style>
</head>
<body>
<div id="app">
<div id="theme">
<div class="sider-layout">
<div class="logo"><h1>Title app</h1></div>
<div class="menu">
<div class="menu-scroll">
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<div>菜单结束</div>
</div>
</div>
<div class="hidden-layout">缩进按钮</div>
</div>
<div class="header-layout">
<div class="header-content">
<h1>Header --------------</h1>
</div>
</div>
<div class="content-layout">
<div class="page-container">
<li>=================================</li>
<li>=================================</li>
<li>=================================</li>
<li>=================================</li>
<li>=================================</li>
<li>=================================</li>
<li>=================================</li>
<li>=================================</li>
<div>内容结束</div>
</div>
</div>
</div>
</div>
</body>
</html>
