<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .layui-side{ position:fixed; width:200px; top:0; bottom:0; background-color: #393D49; } </style> </head> <body> <div class="layui-side layui-bg-black"> </div> </body>
这样写还有一个好处就是，侧边栏的高度是不固定的，它可以随不同大小的浏览器窗口而变化，兼容性也非常好ＩＥ８也行
（2）css固定顶部导航简单的写法：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> html,body{ margin:0; padding:0 } .header{ height:80px; width:100%; background-color:#ccc; } .fix-header{ position:fixed; top:0 } .content{ height:1000px; padding-top:80px; background-color: #5fb878; } </style> </head> <body> <div class="header fix-header">固定的顶部导航条</div> <div class="content">23333</div> </body> </html>