<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title></title>
<style>
* { padding: 0; margin: 0; }
.header { height: 60px; background: #3B8CFF; }
.side { position: fixed; width: 220px; top: 60px; bottom: 0; }
.header h2 { color: #fff; line-height: 60px; margin: 0 10px; }
.scroll { height: 100%; background: #E9EEF1; overflow-x: hidden; }
.scroll li { line-height: 60px; text-align: center; border-bottom: 1px solid red; }
.content { position: absolute; left: 220px; right: 0; }
</style>
</head>
<body>
<div class="wrap">
<div class="header">
<h2>XXX管理系统</h2>
</div>
<div class="side">
<div class="scroll">
<ul>
<li>菜单A</li>
<li>菜单B</li>
<li>菜单C</li>
<li>菜单D</li>
<li>菜单A</li>
<li>菜单A</li>
<li>菜单A</li>
<li>菜单A</li>
<li>菜单A</li>
<li>菜单A</li>
<li>菜单A</li>
<li>菜单A</li>
<li>菜单A</li>
<li>菜单A</li>
<li>菜单A</li>
<li>菜单A</li>
<li>菜单A</li>
<li>菜单A</li>
<li>菜单A</li>
<li>菜单Z</li>
</ul>
</div>
</div>
<div class="content">内容区域</div>
</div>
</body>
</html>
浙公网安备 33010602011771号