<!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>